앱을 만들때 자주 사용해야할 파일
여러 필요한 중요한 내용들을 등록하게 됨
프로젝트의 메타 데이터를 정의하고 관리하는 곳
ex) 프로젝트의 버전, 사용 환경, dart의 버전 등
각 플랫폼에 맞게 앱을 배포하기 위한 정보가 들어있음
개발하기 원하는 각종 dart 관련 코드를 테스트해볼 수 있음
main.dart 파일이 들어있음
앞으로 앱을 만들 때 99%를 이 폴더에서 작업해야함
우선 flutter material 라이브러리를 가져와야함
flutter 프레임워크 (SDK)에 포함된 모든 기본 위젯과 material 디자인 테마 요소들을 사용하기 위함
※ material 디자인 : 모바일, 데스크탑, 그외 디바이스를 아우르는 일관적인 디자인을 위해서 google이 제공한 가이드라인
import 'package:flutter/material.dart';
// i 입력 -> import 선택 -> fm 입력 -> 패키지 선택
// 앱의 시작점 => : fat arrow
void main() => runApp(MyApp()); // 최상위 함수
레이아웃을 빌드하는 뼈대를 만드는 위젯이므로 stateless widget임
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
widget build(BuildContext context) {
return materialApp(
);
}
}
모든 커스텀 위젯은 또다른 위젯을 return하는 build() 함수를 가지고 있음
Flutter material 라이브러리를 사용하는 기능을 가진 위젯인 materialApp이 return 되도록 작성
-> Flutter 프레임워크가 제공하는 모든 오브젝트와 기본 테마를 사용할 수 있게 됨
반드시 Argument들을 가져야 함
▼ 앱을 총칭하는 기본 타이틀 만들기
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return materialApp(
title: 'First app',
theme: ThemeData(
primarySwatch: Colors.blue
), // ThemeData <- closing label
); // MaterialApp
}
}
앱을 실행했을 때 가장 먼저 보이는 화면
커스텀 위젯
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return materialApp(
title: 'First app',
theme: ThemeData(
primarySwatch: Colors.blue
), // ThemeData <- closing label
home: MyHomePage()
); // MaterialApp
}
}
앱 화면에 다양한 요소들을 배치하고 그릴 수 있도록 도와주는 위젯
이 위젯이 없으면 그 어떤 요소들도 앱 화면에 배치할 수 없음
// 커스텀 위젯 (MyHomePage()) 만들기
// 문자 출력만 할거라 정적 위젯으로 만듬
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First app'),
), // AppBar
body: Center(
child: Column(
children: <Widget>[
Text('Hello'),
Text('Hello'),
Text('Hello')
], // <Widget>[]
), // Column
), // Center
); // Scaffold
}
}
※ Argument
appBar
Scaffold의 Argument로 AppBar 위젯을 사용함
title
AppBar의 Argument로 Text 위젯을 사용함
body
Scaffold의 Argument로 Center 위젯 사용함
child
Center의 Argument로 Column 위젯 사용함
※ materialApp 위젯에서와 Scaffold 위젯에서의 title 차이점
materialApp 위젯
앱의 이름을 나타냄
Text 위젯을 사용하지 않고 바로 문자열 입력
Scaffold 위젯
앱의 상단바에 나타나는 text
Text 위젯을 사용해야 함
Column 위젯은 요소들을 세로로 정렬해줌
요소들이 여러개 있어야되므로 Argument로 children (위젯 배열) 필요함
MyHomePage라는 위젯을 만들지 않고 바로 Scaffold 위젯을 적어주어도 됨
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// stl 입력 -> stateless 선택 -> 클래스 이름(MyApp) 추가
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return materialApp(
title: 'First app',
theme: ThemeData(
primarySwatch: Colors.blue
), // ThemeData <- closing label
home: Scaffold(
appBar: AppBar(
title: Text('First app'),
), // AppBar
body: Center(
child: Column(
children: <Widget>[
Text('Hello'),
Text('Hello'),
Text('Hello')
], // <Widget>[]
), // Column
), // Center
); // Scaffold
); // MaterialApp
}
}
사용하지 않는 이유 : 웹 페이지 수가 많아지면 코드가 너무 길어져서 한 페이지에 길게 작성하는 것보다 따로 떼어서 다른 페이지에 작성하는 것이 좋음