- 화면 레이아웃 구성 위젯 작성 MaterialApp, Text, Scaffold, Appbar
- 위젯 추출해서 코드 나누기 stateless widget
- Public 위젯과 Private 위젯
main.dart
import 'package:flutter/material.dart'; // StatelessWidget 위젯에 그리기 위한 import
// import 'pages/flutter_home_page.dart';
import 'pages/my_home_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
// home: const FlutterHomePage(),
home: const MyHomePage(),
// home: const _MyPrivatePage(),
);
}
}
// _언더바를 앞에 붙이면 밖에서 못불러옴. 해당 페이지 안에서만 사용가능
// 해당 파일 안에서만 쓰일때는 _(언더바)를 써서 Private위젯으로 관리
// _언더바를 안쓰면 퍼블릭한 위젯임 아무나 가져다 쓸 수 있음.
/*
class _MyPrivatePage extends StatelessWidget {
const _MyPrivatePage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Center(
child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
body: const Center(child: Text('Flutter My Home Page')),
);
}
}
*/
my_home_page.dart
import 'package:flutter/material.dart';
// StatelessWidget은 build기반으로 화면을 그린다.
// ↓위젯이라고 불림
class MyHomePage extends StatelessWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Center(
child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
body: const Center(child: Text('Flutter My Home Page')),
);
}
}
flutter_home_page
import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/my_home_page.dart';
class FlutterHomePage extends StatelessWidget {
const FlutterHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Center(child: Text('Flutter Home Page')),
),
body: const Center(
child: Text('플러터 홈페이지'),
),
);
}
}