[Flutter] 시작하기

노성빈·2024년 2월 16일

Flutter

목록 보기

2/3

플러터 시작하기

파일 소개

'package:flutter/material.dart'

main.dart 파일이 들어있으며, 플러터 개발 대부분이 이루어질 라이브러리다.

pubspec.yaml

프로젝트의 메타데이터 저장공간이다.
프로젝트의 버전, 사용환경, dart의 버전, 서드파티 라이브러리 등이 정의된다.

Test

dart 테스트 공간

코드 구조

import 'package:flutter/material.dart'; // 플러터의 모든것이 들어있으므로 반드시 `import` 해준다.


void main() => runApp(MyApp()); //root위젯을 불러온다.

class MyApp extends StatelessWidget{ //StatlelessWidget이라는 정적 위젯을 상속받아 구현한다.
  @override
  Widget build(BuildContext context) {  // 객체를 구현한다.
    return MaterialApp( // 하위 위젯을 리턴한다.
      title: 'First App',// 앱의 이름을 설정한다.
      theme: ThemeData( // 앱의 전체 테마를 정한다
          primarySwatch: Colors.blue  // 테마 속성이다.
      ),
      home: MyHomePage(), //그 하위 위젯을 불러온다.
    );
  }
}

class MyHomePage extends StatelessWidget{ // StatelessWidget이라는 정적 위젯을 상속받아 구현한다.
  @override
  Widget build(BuildContext context) { //객체를 구현한다.
    return Scaffold(  //다양한 요소들을 배치하기 위한 베이스 공간이다.
      appBar: AppBar(   //상단바를 구현한다.
        title: const Text('First App'), //상단바에 보여질 제목 텍스트를 입력한다.

      ),
      body: const Center( //앱 body를 구현한다.
        child: Column(  //자식 위젯을 만든다.
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello')
          ],
        ),
      )
    );
  }
}