1.기본구조
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: RecipePage(),
//여기 값을 받아와서 바꾸면 이동
//예시
// home: LoginPage
);
}
}
class RecipePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Icon(Icons.arrow_back_ios),
title: Text("타이틀"),
centerTitle: true, //// 앱바의 타이틀 가운데 정렬
),
endDrawer: Container(
width: 200,
color: Colors.red,
),
body: SafeArea(
child: Column(
children: [
Text("data"),
],
)),
);
}
}
2. Scaffold
Scaffold는 Flutter에서 기본적인 앱 구조를 제공하는 위젯입니다. 예를 들어, 화면 상단에 AppBar(상단바), 화면 본문(body), 하단의 BottomNavigationBar(하단바) 등을 쉽게 배치할 수 있도록 도와줍니다. 즉, 앱 화면의 뼈대를 구성하는 위젯이라고 할 수 있습니다.Scaffold의 주요 속성 중 일부를 설명드리면:appBar: 화면 상단에 고정되는 앱 바를 설정합니다.
body: 앱의 메인 콘텐츠가 위치하는 곳입니다.
floatingActionButton: 화면 하단에 떠 있는 액션 버튼을 설정할 수 있습니다.
drawer: 화면 왼쪽에서 스와이프하면 열리는 네비게이션 메뉴를 설정할 수 있습니다.
Scaffold를 사용하면 Flutter에서 기본적으로 필요한 화면 배치를 쉽게 관리할 수 있습니다. 이를 사용하지 않고 직접 화면을 구성할 수도 있지만, Scaffold를 사용하면 더 편리하게 기본 레이아웃을 설정할 수 있어 자주 사용됩니다.2.1 AppBar, Title, Drawer
scaffold 아래에 설정가능
return Scaffold(
appBar: AppBar(
leading: Icon(Icons.arrow_back_ios),
title: Text("타이틀"),
centerTitle: true, //// 앱바의 타이틀 가운데 정렬
),
endDrawer: Container(
width: 200,
color: Colors.red,
),
3.SafeArea
SafeArea는 모바일 기기의 상단과 하단에 있는 시스템 UI 영역(예: 노치, 상태바, 네비게이션바)을 침범하지 않도록 콘텐츠를 자동으로 배치해주는 위젯입니다. 즉, 화면 상단의 시간, 배터리 표시, 하단의 네비게이션 바 등에 콘텐츠가 겹치지 않게 보호해 줍니다.
body: SafeArea(
child: Column(
children: [
Text("data"),
],
)),SafeArea을 잡고 시작한 모습
안잡고 colum으로 시작해도 된다.
기능에따라 설정
추가적인 컨벤션
- 메소드를 모듈화 하기
appBar: _ProfileAppBar(), endDrawer: _ProfileDrawer(),
언더바를 붙이고 파스칼
- 위젯으로 모듈하는 그냥 파스칼
import 'package:flutter/material.dart';
void main() {
runApp( MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: RecipePage(),
//여기 값을 받아와서 바꾸면 이동
//예시
// home: LoginPage
);
}
}
class RecipePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _ProfileAppBar(),
endDrawer: _ProfileDrawer(),
body: SafeArea(
child: Column(
children: [
Text("data"),
],
)),
);
}
AppBar _ProfileAppBar() {
return AppBar(
leading: Icon(Icons.arrow_back_ios),
title: Text("타이틀"),
centerTitle: true, //// 앱바의 타이틀 가운데 정렬
);
}
Container _ProfileDrawer() {
return Container(
width: 200,
color: Colors.red,
);
}
}
- 메소드 추출 시
_를 붙여 프라이빗 메소드로 만들면, 같은 파일 내에서만 사용할 수 있음을 의미하고, 다른 파일에서 불필요하게 접근하지 않도록 보호할 수 있습니다.
- PascalCase(첫 글자가 대문자이고 단어마다 대문자로 시작하는 방식)를 사용하는 것은 Flutter 및 Dart의 네이밍 컨벤션에 맞다.
Share article