1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); //어플리케이션 메인 페이지를 이 안에 넣어주자.
}

class MyApp extends StatelessWidget { //이것이 앱 메인페이지가 된다.
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //실제 코드가 들어가는 부분
    );
  }
}

위는 flutter의 제일 밑바탕이 되는 코드이다.
flutter는 기본적으로 ‘위젯’을 사용해 화면을 구성한다. 위젯은 대문자 이름 뒤에 소괄호가 붙는 형식을 가지고 있다.

텍스트,아이콘,이미지,네모박스 위젯의 가장 기본적인 사용법을 알아보겠다.

텍스트

Text(‘안녕’)

아이콘

Icon(Icons.shop)

이미지

Image.asset(‘경로’)
메인 폴더 아래에 asset폴더를 만들어 이미지를 집어넣자. 이미지를 사용하려면 pubspec.yaml 파일 내에 이미지를 등록해야한다.

1
2
3
4
# The following section is specific to Flutter packages.
flutter:
  assets:
    - assets/

flutter 항목 내에 assets 폴더를 등록해줬다.
Image.asset(‘assets/olli-the-polite-cat.png’)

네모박스

Container() 혹은 SizedBox()를 사용해도 상관없다.

Container(width: 50, height: 50, color: Colors.lightBlue,)
flutter에서 숫자의 단위는 LP를 사용한다. 50LP==1.2cm정도
그러나 home에 해당 코드를 작성하면 실행해 보았을때 Box가 전체 화면을 채우고 있음을 확인할 수 있다.

박스의 크기를 지정해주기 위해서는 어디서부터 시작할지를 정해줘야한다. 이는 부모가 결정한다.

기준점 설정

Center()
자식 위젯의 기준점을 중앙으로 설정해준다.

1
2
3
     home: Center(
        child:  Container(width: 50, height: 50, color: Colors.lightBlue,),
      )

이렇게 child라는 이름의 파라미터를 설정해주는 것으로 위젯 내부에 위젯을 넣을 수 있다.