Flutter - create project

Flutter 란

iOS 및 Android와 같은 운영 체제에서 코드 재사용을 허용하는 동시에 애플리케이션이 기본 플랫폼 서비스와 직접 인터페이스할 수 있도록 설계된 크로스 플랫폼 UI 툴킷입니다. 목표는 개발자가 가능한 한 많은 코드를 공유하면서 존재하는 차이점을 수용하면서 다양한 플랫폼에서 자연스럽게 느껴지는 고성능 앱을 제공할 수 있도록 하는 것입니다.

 

참조 : https://docs.flutter.dev/resources/architectural-overview

 

 

1. flutter 설치

https://docs.flutter.dev/get-started/install

Install

2. editor 설정

https://docs.flutter.dev/get-started/editor

Set up an editor

 

3.  app 생성

https://docs.flutter.dev/get-started/test-drive

Test drive

 

프로젝트를 생성하면 다음과 같은 폴더구조가 생긴다. 

android, ios, linux,web 에 대해 설정되어 있어 해당 폴더들이 이싿. 

lib/main.dart 가 시작지점이다. 

 

linux 와 windows 를 프로젝트 생성시 설정할 수 없다면 

명령 프롬프트에서 아래와 같은 명령을 실행 한다. 

 

flutter config --enable-linux-desktop

flutter config --enable-windows-desktop

 

lib/main.dart 를 간단히 확인하자

import 'package:flutter/material.dart'; // matrial desing 을 사용하기 위한 import

void main() {
  runApp(const MyApp()); // 시작점 (MyApp 이라는 StatelessWidget 을 실행한다.)
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, 
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

기본 StatelessWidget 은 MyApp class 설정 및 시작점인 main() 함수의 runApp 에 인자로 전달

MyApp의 build 함수에서 home 을 MyHomePage 라는 StatfulWidget 으로 설정

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

MyHomePage 는 createState 를 override 하여 _MyHomePageState 를 전달

_MyHomePageState 는 setState 를 통해  _counter를 증가시키고 ui 를 rerender 시킨다. 

 

build 영역을 확인하면

Scaffold 라는 형태로 되어 있고 해당 형태는 

 

appBar

body

floatingActionButton 

 

이라는 구조로 이루어져 있다. 

 

appBar 는 상단의 bar 형태를 구성한다. 

body 는 중앙에 floatingActionButton 을 누름에 따라 증가하는 counter 를 표시한다. 

floatingActionButton 은 하단에 + button 을 구성한다. 

 

 

 

 

DeviceManager 를 클릭하고

Create Device 를 클릭한다. 

하드웨어 선택

 

 

시스템 image 를 선택 한다.  가능하다면 최신버전을 선택하자 (Tiramisu 가 preview 인 관계로 sv2 선택)

원하는 device 를 선택하고 next

특별히 건드릴건 없고 Graphics 만 가능하다면 hardware 로 설정. finish

(docker 같은 hardware 가상화 기능을 쓰고 있다면 오류가 날수도 있다. 그럴경우 그냥 automatic)

▶ <-- 이걸 눌러서 실행

 

벌레 모양 눌러서 디버그

 

왼쪽 하단에 debug 관련 창이 있다. 

프로그램 실제 실행 화면

 

 

 

 

관련영상

https://youtu.be/Ca_Ynf6M8wE