[flutter] flutter 기초

Widget

모든 것은 Widget을 갖고 있는 구조이다.

• MaterialApp 위젯, Center 위젯, Text 위젯

Scaffold 위젯

Scaffold.appBar는 앱의 상단 AppBar를 설정함

Reformat 방식

),),)식으로 parenthesis 앞뒤에 comma(,)를 쓰도록 권장함, 이렇게 하면 우클릭해서 Reformat하면 정렬됨)

Show Intention Actions

위젯으로 감싸는 코드를 자동으로 생성함

• shortcut : alt + Enter
  

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: const Center(
          child: Image(
            image: NetworkImage(
                'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80'),
          ),
        ),
        appBar: AppBar(
          title: const Text('Winner'),
          backgroundColor: Colors.amber,
        ),
      ),
    ),
  );
}

Asset Image 사용하기

• 먼저 pubspec.yaml 파일에서 assets를 uncomment한다.
• directory/ 혹은 directory/filename.png를 지정한다.
• 주의해야할 점 : yaml은 indentation이 중요하다. indent는 2칸이며, 칸수가 맞지않으면 에러가 발생한다.(아래 예시 참고)

아래는 assets indent가 1칸(홀수)이므로 에러가발생한다.

flutter:
  uses-material-design: true
   assets:
     - images/

아래처럼 수정해야한다.

flutter:
  uses-material-design: true
  assets:
    - images/

• assets 설정후 우측상단에 Pub get으로 package에 적용되도록 해준다.
  

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text('Winner'),
          backgroundColor: Colors.amber,
        ),
        body: const Center(
          child: Image(
            image: AssetImage('images/diamond.png')
          ),
        ),
      ),
    ),
  );
}