링크
프로젝트 폴더
-
pubspec.yaml: 프로젝트의 메타 데이터를 정의하고 관리(프로젝트 버전, 프로젝트 사용환경, dart 버전, 각 종 dependency 등)
-
lib 폴더: 앱을 만들 때, 99% 이상을 이곳에서 한다.
기본 코드
// flutter material 라이브러리를 import해야만 모든 기본 위젯과 테마 요소들을 사용할 수 있다
import 'package:flutter/material.dart';
// 컴파일러에게 시작점을 알려주기위해서 void main 함수를 불러온다
// void: 텅 빈 공간 => main이란 함수가 끝났을 때, 아무런 값도 반환하지 않는다
// main(): main이란 이름의 함수
// fat arrow를 사용해서 main함수가 runApp 함수를 호출 한다
// runApp은 호출될 때마다 argument(인자 = 위젯)를 받아야 한다
// MyApp은 우리가 직접 만드는 커스텀 위젯이라서, 이름을 마음대로 지어도 된다
// MyApp 위젯은 위젯 트리에서 최상위에 위치하고, 스크린 레이아웃을 최초로 빌드하는 역할을 한다
// ';' 반드시 세미콜론을 붙여야한다
void main() => runApp(MyApp());클래스 명과 함수 명
// 함수 명
// 첫 글자는 소문자
// 카멜케이스 사용
main(), runApp()
// 클래스 명
// 첫 글자가 대문자로 시작
// 위젯
// 카멜케이스 사용
MyApp()위젯 만들기
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// MyApp 위젯 만들기
// StatelessWidget: 상태 변화가 없는 위젯
class MyApp extends StatelessWidget {
@override
// 모든 커스텀 위젯은 또 다른 위젯을 리턴하는 build라는 함수를 가지고 있다
Widget build(BuildContext context) {
// import한 material 라이브러리를 사용하는 MaterialApp 위젯을 사용한다
// MaterialApp 위젯은 runAPP 함수처럼 반드시 argument(인자)를 가져야한다
// flutter의 모든 위젯들은 argument(인자)를 갖는다
return MaterialApp(
// MaterialApp 위젯에서 title을 지정해준다
title: 'First app',
// ThemeData()는 앱의 기본적인 디자인 테마를 지정한다
theme: ThemeData(
// Swatch: 견본 => 앱에서 사용할 색상 견본, 그리고 음영을 사용할 수 있다.
primarySwatch: Colors.blue
), // ThemeData: 클로징 레이블: flutter에서는 위젯들의 구분이 중요하다
// home은 App이 실행될 때, 가장 먼저 화면에 보여주는 경로
home: MyHomePage(),
); // MaterialApp: 클로징 레이블
}
}커스텀 위젯 만들어보기
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// MaterialApp의 title은 왜 아래와 같이 Text위젯을 사용하지 않았을까?
// MaterialApp 내의 title은 앱을 총칭하는 이름
// 스마트폰에서 최근 사용한 앱의 리스트를 보여줄 때는
// MaterialApp에서 설정한 title이 보여진다
title: 'First app',
theme: ThemeData(
primarySwatch: Colors.blue
),
// home 위젯이 반드시 필요한 이유는 앱이 실행되면 제일 먼저 보여주는 경로이기때문에
// home 위젯이 없으면 아무것도 나타나지 않는다
home: MyHomePage(),
);
}
}
// 커스텀 위젯을 만들 때는 StatelessWidget으로 만들 지, StatefulWidget으로 만들 지를 먼저 고민해야한다.
// 체크 박스, 데이터 받는 등, 모양이 변화는 요소가 하나라도 있다면 StatefulWidget을 사용해야한다.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Scaffold: 교수대, 처형대 => 교육학에서는 '무언가를 혼자 해낼 수 있도록 발판을 만들어 주다'라는 뜻으로 쓰인다
// Scaffold는 flutter에서 빈 도화지 역할을 한다. Scaffold 위젯이 없으면 어떤 요소들도 앱 화면에 배치 할 수 없다
return Scaffold(
// appBar는 기본적으로 앱의 상단 바를 나타낸다
appBar: AppBar(
// Text 위젯은 텍스트와 관련된 다양한 디자인적 arguments를 가지는 위젯이다
// MaterialApp의 title과 다르게 AppBar의 title은
// 앱 화면 AppBar에 출력되는 타이틀이다
title: Text('First app'),
),
// body는 scaffold 위젯 내에서 가장 주요한 내용이다
// Center 위젯은 위젯들을 중앙에 배치한다
body: Center(
// Column 위젯은 자신의 위젯 내의 모든 요소들을 세로로 배치한다
// 요소들에서 알 수 있듯이, child가 아닌 children을 사용한다
child: Column(
// 대괄호는 배열을 의미하고, 이 안에 세로로 정렬될 위젯들을 나열한다
// <Widget>은 정확하게는 List<Widget>이라는 제네릭스에서 사용하는 표현이다
// 이제는 <Widget>을 사용하지 않고, []사용해도 된다
children: <Widget>[
// 배열과 같이 한 위젯을 입력하면 ','로 다른 위젯을 나눠주어야한다
// ### 참고로 Theme.of(context)를 사용해서 ThemeData에 접근할 수 있다.
Text('Hello', style: TextStyle(color: Theme.of(context).primaryColor),
Text('Hello'),
Text('Hello'),
],
),
),
);
}
}
- 커스텀 위젯을 여러개로 분리하는 이유는 한 페이지에 길게 코딩을 하는 것은 가독성, 유지보수성 그리고 간결성에 좋지 않기때문이다. 그래서 가급적 코드 구성 상, 체계적인 코드 구분을 두면서 처음부터 코딩하는 습관을 들이는 것이 좋다.
👨🏻💻☕️ 🎹🎵 🐰🎶 🛫📷