flutter 프로젝트 생성
- flutter create "생성할 프로젝트 이름"
- flutter create --web "생성할 프로젝트 이름" (웹 포함시)
canvas 회사의 신규 페이지 flutter로 제작하기 위해 프로젝트를 생성하였다
flutter 기본적인 폴더 구조
- web 까지 진행하기 위해 생성한 flutter 프로젝트 기본 폴더 구조는 아래와 같다
- 폴더
- .idea ➡ 개발도구에 필요한 설정
- android ➡ 안드로이드 네이티브 코드를 작성하는 부분
- build ➡ 빌드시 생성되는 파일
- ios ➡ IOS 네이티브 코드를 작성하는 부분
- lib ➡ dart 코드를 작성하는 부분 (실질적인 코드작성은 이 폴더에서 진행한다)
- test ➡ 테스트 코드를 작성하는 부분
- web ➡ web 개발 기능 활성화에 따른 chrome 디버깅 가능
- 파일
- .gitignore ➡ Git의 버전관리 기능을 사용하지 않을 파일
- .metedata ➡ 프로젝트가 관리하는 파일 (임의 수정 X)
- .packages ➡ 각종 패키지 정보가 들어있는 파일 (임의 수정 X)
- flutter_canvas.iml ➡ (프로젝트 이름으로 지정됨) 개발도구에 필요한 설정 파일 (임의 수정X)
- pubspec.lock ➡ 패키지 매니저가 이용하는 파일 (임의 수정 X)
- pubspec.yaml ➡ 패키지 매니저가 이용하는 파일 (패키지 설치, assets, font 설정시 사용)
- README.md ➡ 프로젝트 설명을 작성하는 파일
프로젝트 구성
- 만들어야할 페이지는 총 2개
- 일단 폴더 구성을 아래와 같이 하였다
- mock data를 저장하는
model - 페이지 파일을 저장하는
pages - 공통적인 Widget을 저장하는
widgets(실제 사용 X)
- mock data를 저장하는
main.dart
main.dart파일은 최초 실행시 제일 먼저 작동하므로 절대 삭제X, 파일 이름도 변경하면 안된다
그래서 기존 파일에 있던 코드는 위의 두 줄만 남기고 수정하면 된다
import 'package:flutter/material.dart';
void main() {runAPP(MaterialApp())}
프로젝트에 맞게 수정
// 필수적인 package (material은 안드로이드용 UI를 사용할 수 있게 해준다
import 'package:flutter/material.dart';
// 구글 폰트 사용
import 'package:google_fonts/google_fonts.dart';
// config.js 같은 느낌의 파일, 난 color를 모아두었다
import 'constant.dart';
// 화면에 보여지는 파일을 따로 두었다 (전체적인 페이지 관리)
import './main_home.dart';
// 앱 실행 , 프로젝트에 맞게 변경해 주었다 (class CanvasMobile의 내용)
void main() {
runApp(CanvasMobile());
}
// 상태 변화가 없는 StatelessWidget, 한번 UI가 그려지면 그대로 있다
class CanvasMobile extends StatelessWidget {
// 상속받은 메서드를 현재 class 안에서 재정의
// UI를 만드는 부분
Widget build(BuildContext context) {
// 구글 기본 디자인인 Material Design을 써서 앱,웹을 만든다
// 구글이 지향하는 Material Design을 사용할 수 있게 하는 class
return MaterialApp(
// debug 표시를 보지 않기 위해 사용
debugShowCheckedModeBanner: false,
// web에서 탭에 나타나는 타이틀
// 안드로이드에서는 최근 앱 버튼을 누를 때 표시되는 작업관리자의 앱 스샷위에 표시
title: '캔버스 :: 당신의 색깔을 담은 주얼리',
// 프로젝트의 전체 테마 설정
theme: ThemeData(
// 전체 text 테마 설정 google font import
textTheme: GoogleFonts.robotoTextTheme(
Theme.of(context).textTheme,
),
// 실행하는 플랫폼에 맞게 시각적인 밀도 조정, 기본 설정 되어있음
visualDensity: VisualDensity.adaptivePlatformDensity,
// 커서 기본 색상
cursorColor: brightBlackColor,
// elements 기본 색상
primaryColor: brightBlackColor,
),
// 화면에 보여지는 내용
home: MainHome(),
);
}
}Material Design
종이 위에 떨어지는 빛과 그림자, 잉크 방울이 떨어질 때 퍼지는 움직임처럼 이런 기본적인 재료들을 사용할 때 발생하는 움직임과 상호작용을 디지털에 적용하는 것을 중점으로 둔 디자인
StatelessWidget
변화가 필요없는 화면을 구현할 때 사용하는 Widget Class
- 여기서
build메서드는 화면을 구성하는 UI들을 구현하는 메서드이다
즉, 화면이 출력될 때build메서드가 호출되면서build메서드 내부에 구현한 UI Widget들이 화면에 출력된다 StatelessWidget은 말그대로상태(State)를 가지지 않는다
StatelessWidget안에 있는 모든UI Widget들은상태를 가질 수 없고,
상태가 없으니상태의 변화를 인지할 필요도 없다
그래서 화면이 로드될때 딱 한번만build메서드가 호출되어 화면을 구현한 다음build메서드는 다시 호출되지 않는다
debug 표시
title 표시
패키지 설치
구글 폰트 설치
pubspec.yaml 파일의 dependencies: 에 설치할 패키지: 버전을 적고 flutter pub get
플러터 패키지 사이트
dependencies:
provider: ^4.3.2+1
intl: ^0.16.1
date_format: ^1.0.8
google_fonts: ^1.1.0
font_awesome_flutter: ^8.8.1
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3