[Flutter] 플러터 1주차(2) - 구조, 시작하기(VSCode)

2023.01.19 - [📱|APP DEV/Flutter] - [Flutter] 플러터 1주차(1) - 특징, 환경설정(Mac)

구조

Flutter는 위젯(Widget)으로 모든 것이 구성된다.

위젯은 '작은 모듈'이고 이것을 붙이고 붙여서 하나의 앱을 만든다.

 

https://docs.flutter.dev/development/ui/widgets

위의 링크에서는 Flutter 공식문서에서 제공하는 위젯들을 살펴볼 수 있다.

별도의 패키지 없이 간편하게 코드만 입력하여 사용할 수 있다.

 

이때 Andriod와 iOS의 화면 구성을 구현한 위젯의 이름이 구분된다.

Material Widget   - Android 기본 화면 구성 요소  Cupertino Widget   - iOS 화면 구성 요소  Custom Widget   - 사용자 고유 디자인 요소

 

---

시작하기(VSCode)

1. command-shift-p 단축키로 커맨드 팔레트를 실행한다.

2. Flutter: New Project를 클릭하고 Application을 선택한다.

3. 개발을 진행할 폴더를 선택한다.

4. 어플리케이션 이름을 설정한다.

5. 프로젝트가 생성된다.

완성된 모습

lib 폴더 : 메인 작업 폴더  pupspec.yaml : 라이브러리 설정 파일  main.dart : 첫시작 화면

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
      ),
    );
  }
}

 

+ Tip_코드 파란실선 제거하기 & dart recommend(VSCode)

1. 코드 파란실선 제거

analysis_options.yaml 파일 수정

prefer_const_constructors: false
prefer_const_literals_to_create_immutables: false

 

2. dart recommend(VSCode)

command+shift+P (command palette) 실행 후

dart recommend를 입력한다.

자동 정렬기능 등의 dart 개발에 유용한 기능을 제공한다.

 

에뮬레이터 구동하기

command+shift+P (command palette) 실행 후

launch를 입력한다.

이전에 생성한 에뮬레이터가 목록에 보인다.

 

실행하기

Run without Debugging 등으로 실행한다.

 

---