플러터 프로젝트를 생성하면 MaterialApp() <= 괄호 안에 코딩해서 Ui를 꾸며라고 합니다 그럼 이 친구는 무슨 역할을 할까 의문증이 생겼습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp()); //엡구동 안에는 메인 페이지
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp( <===
) ;
}
}
Material 은 영어 사전 적으로 재료 라고 합니다
우리가 Ui를 꾸미고 코드를 작성하는 재료들을 MaterialApp 에 담는다고 생각하면 될 거 같습니다.
크게 5 가지 설정이 있다고 합니다
1. 기본 사용=> MaterialApp 은 일반적으로 플러터 앱 앱의 최상위에서 사용됩니다. main 함수에서 앱을 초기화할 때도 사용합니다.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyHomePage(),
),
);
}
2. 테마 설정 (theme) => 속성을 통해 기본 색상, 폰트 등을 지정할 수 있습니다.
MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.orange,
),
)
3. 홈 화면 설정 => home 속성을 사용하여 앱의 홈 화면을 설정합니다. 홈 화면은 앱이 시작될 때 보여지는 초기 화면입니다.
MaterialApp(
home: MyHomePage(),
)
4. 라우팅 및 내비게이션 => 앱의 내비게이션을 설정하는 데 사용됩니다.' routes' 속성 을 통해 여러 화면 간의 경로를 정의하고 내비게이션을 관리할 수 있습니다.
MaterialApp(
routes: {
'/second': (context) => SecondScreen(),
},
)
5. 로컬화 및 국제화 => localizationsDelegates와 supportedLocales 속성을 통해 다국어 지원을 설정할 수 있습니다
MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'),
const Locale('ko', 'KR'),
],
)
플러터 앱을 개발하는 데 필수적인 역할을 하는데, 앱의 전체적인 구조와 스타일을 정의하고 다양한 기능들을 설정할 수 있습니다. 또한, MaterialApp을 통해 플러터의 다양한 기능들을 쉽게 활용할 수 있습니다.
엡들은 기본적으로 정해진 규격이 있습니다. 여기서 중앙 공간을 body라고 하기도 하고 언어마다 조금씩 차이가 있을 겁니다.
Scaffold 은 영단어로 발판, 골격, 단두대 라고 합니다
Scaffold는 앱의 전반적인 레이아웃 및 구조를 설정하는 데 사용되며 디자인 요소들을 포함하여 앱의 기본적인 디자인을
정의하는 데 중요한 역할을 합니다. 이를 통해 간편하게 앱의 레이아웃을 구성할 수 있습니다.
1.AppBar 설정
앱의 상단에 위치하는 AppBar를 설정하는 데 사용됩니다. 앱의 제목, 아이콘 등을 표시하는 데 사용됩니다.
어플에 따라 앱바가 있을 수도 있고 없을 수도 있습니다.
class MyApp extends StatelessWidget {
//엡 메인 페이지
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('App Bar 입니다.'),
),
),
);
}
}
2. Body 설정
body 속성을 통해 앱의 주요 내용을 정의합니다. 이 부분에는 다양한 위젯들을 배치하여 앱의 실제 내용을 표시합니다.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('App Bar 입니다.'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
3. Drawer 추가
drawer 속성을 사용하여 앱의 좌측에서 스와이프 하여 나타나는 drawer를 추가할 수 있습니다.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
drawer: Drawer(
child: ListView(
children: [
ListTile(
title: Text('메뉴 항목 1'),
),
ListTile(
title: Text('메뉴 항목 2'),
),
],
),
),
// ...
));
}
}
4.BottomNavigationBar.
화면 하단에 탭바를 추가할 수 있습니다.
@override
Widget build(BuildContext context) {
return MaterialApp(
//메인 페이지 디자인
// home: Scaffold(
// body: Center(
// child: Text("hello world!"),
// ),
// ),
home: Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '홈',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '검색',
),
],
),
// ...
));
}
}
