본문 바로가기
반응형

프로젝트 기록/Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발10

계산기 만들기_Flutter와 Bootstrap을 활용한 웹 개발 기초 간단한 계산기(더하기 기능) 만들기 예제 1. Flutter 프로젝트 생성하기(cmd)flutter 설치 및 환경변수 설치는 아래 참고 https://tiny-immj.tistory.com/74 2.Flutter 개발 환경 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발개발환경 선택플러터 개발을 할 때는 대상 웹과 동일한 플랫폼에서 해야 합니다즉 Mac OS용으로 개발하기 위해선 Mac이 필요하고 Windows 타깃으로 개발을 하기 위해선 Windows PC가 필요합니다 저는 tiny-immj.tistory.com 1) 명령 프롬프트(cmd)를 실행 2) 프로젝트를 생성할 경로로 이동 D: cd dev\flutterProject 3) 명령어로 Flutter 프로젝트 생성flutte.. 2024. 11. 17.
flutter 웹 개발 index.html과 main.dart, 실행 순서에 대한 이해 1. Flutter 웹 개발 시 파일 실행 순서index.html 실행 → flutter.js 로드 → main.dart 실행 1) index.html 실행 ▷ 브라우저는 웹 애플리케이션 로드 시 index.html 파일을 가장 먼저 처리함 → index.html 파일에서는 기본적인 HTML 구조를 정의함→ index.html dpsms 코드가 포함되어 있어 Flutter 앱의 엔트리포인트인 main.dart를 불러오는 역할을 함  2) flutter.js 로드→ index.html 내 에 의해 flutter.js 파일이 로드됨→ Flutter 엔진과 Dart 코드(main.dart)를 브라우저 환경에서 실행하기 위한 준비 작업을 수행  3) main.dart 실행→ flutter.js가 로드된 후 m.. 2024. 11. 15.
Hello World 출력하는 웹사이트 만들기, Entrypoint, 위젯트리_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발 Flutter 프로젝트 실습 : Hello World 출력하는 웹사이트 이전에도 한 것 같지만 그것은 모바일 앱 에뮬레이터로 띄우기 였습니다https://tiny-immj.tistory.com/75 3. 기초 프로젝트 생성, AVD(안드로이드) 실행_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발Flutter 프로젝트 실습 : Hello World 프로젝트 만들기 cmd에서 Flutter 프로젝트를 생성해보자 $ flutter create [프로젝트명]$ flutter create hello_world ※ 프로젝트명은 소문자로만 작성이 가능하다 숫자가tiny-immj.tistory.com Hello World 프로젝트를 만들어 웹사이트에서 띄우는 방법을 실습해보려 한다  1. Flutt.. 2024. 11. 13.
7. Bootstrap 폼 디자인, flutter dart 에러 해결 _Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Bootstrap을 사용한 폼 디자인1. Bootstrap 폼Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공한다간결한 반응형 폼을 쉽게 만들 수 있고 다양한 입력 필드, 버튼, 레이아웃 옵션 등을 제공함  Bootstrap 구성요소 ▷ form-group : 폼 필드를 그룹화하는 클래스▷ form-control : 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스 ▷ form-check : 체크박스와 라디오 버튼을 위한 클래스▷ btn : 버튼 스타일링을 위한 클래스 2. Flutter와의 연동방법 Bootstrap을 활용해 폼을 디자인한 후 사용자 입력을 처리할 수 있다 Bootstrap 폼을 HtmlElementView를 통해 Flutter UI에 삽입하고 JavaS.. 2024. 11. 8.
6. Bootstrap으로 UI 구성하기_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Bootstrap으로 UI 기본 구성하기1. Bootstrap과 Flutter Bootstrap : 프론트엔드 프레임워크 중 하나로 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS, JavaScript 컴포넌트를 제공한다. 기본적으로 미리 스타일링된 컴포넌트들이 포함되어 빠르고 일관된 UI를 구축하는데 매우 유용하다. Bootstrap과 Flutter를 조합하면 웹 어플리케이션의 사용자 인터페이스를 유연하게 구성할 수 있는데 주요 컴포넌트에는 그리드 시스템, 버튼, 카드, 폼 등이 있다. 예를 들어 그리드 시스템을 사용하면 반응형 레이아웃을 쉽게 구성할 수 있고, 카드를 사용하면 콘텐츠를 정돈된 형태로 표시할 수 있다 2. Flutter 프로젝트에 Bootstrap 연동하기2-1. Bootstra.. 2024. 10. 21.
5.Dart 언어 기초1_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 Dart 언어의 기초 1. 변수와 데이터 타입1) Dart의 역할Dart : Flutter의 기본 프로그래밍 언어, 강력한 타입 시스템과 간결한 문법이 특징 Flutter에서 Dart의 역할 : Dart는 Flutter 애플리케이션의 모든 로직을 작성하는데 사용된다 Flutter 위젯의 상태 관리, 이벤트 처리, 네트워킹, 데이터 변환 등 모든 기능이 Dart로 구현된다 Flutter에서 복잡한 UI와 로직을 Dart로 쉽게 구현할 수 있다 -> Dart의 간결함, 효율성  2) 변수Dart에서 변수는 var,. final, const, 명시적인 타입(int, String)을 사용하여 선언할 수 있다 Dart의 주요 데이터 타입에는 int, double, String, bool, Map이 있다   Str.. 2024. 9. 11.
반응형