플러터) 레시피 앱 만들기 1. 프로젝트 생성

1️⃣ 프로젝트 생성

2️⃣ 메인과 홈 코드 작성

3️⃣ 컴퍼넌트 코드 작성

프로젝트 생성

1.안드로이드 스튜디오를 열어 기존프로젝트를 끄고 플러터 프로젝트를 만들어준다.

New Flutter Project 를 만들어보자

 

2.프로젝트 이름과 경로, 서비스할 플랫폼을 선택해준다.

성능과 시간절약을 위해 필요한 플랫폼만 선택해준다.

 

3.설정파일을 열어 assets 경로를 지정해준다.

여기서는 루트(class_recipes)경로에 assets 디렉토리를 만들어 fonts와 images를 관리해주기로 했다.

 

기존 설정

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/to/resolution-aware-images

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/to/asset-from-package

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/to/font-from-package

 

바뀐 설정

flutter:
  uses-material-design: true
  assets:
    - assets/images/
  fonts:
    - family: PatuaOne
      fonts:
        - asset: assets/fonts/PatuaOne-Regular.ttf

설정을 변경한 뒤 Pub get 버튼을 눌러 적용해준다. 약간의 시간이 걸린다.

 

4.lib 폴더 내에 main.dart 파일을 열어 샘플코드를 지우고 앱 실행구문만 남긴다.

void main() {
  runApp(const MyApp());
}

 

 stl이라고 치면

다음과 같은 구문이 자동완성된다.

class 🌞 extends StatelessWidget {
  const ({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

4.우측 패널의 device manager 를 열어 가상의 휴대폰인 flutter device를 가동한다.

개발화면

5.개발중인 프로젝트를 구동할 플랫폼을 선택해준다.

Ctrl Shift F10을 눌러 앱을 구동하면 가상 디바이스에서 앱이 실행된다.

6. 성능향상을 위한 3D엔진 비활성화

터미널을 켜서 flutter run --no-enable-impeller 라고 써준다.

다음은 본격적으로 코드를 작성해본다.

https://notion6780.tistory.com/122

플러터) 레시피 앱 만들기 2. 메인페이지 코드구현