[Flutter] 4. 캐릭터 페이지 디자인 2: 실전 코딩 part 1~2 - by 코딩셰프

 

 

 

MyApp  (MaterialApp)

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "BBRANTO",
      home: Grade(),
    );
  }
}

 

MaterialApp  

1. 앱의 진입점:

• 앱 실행의 시작점 역할을 합니다.
• runApp() 함수를 통해 앱의 루트 위젯으로 설정됩니다.

2. 앱 설정:

• 앱 제목 (title) 설정
• 기본 테마 (theme) 설정 (색상, 글꼴 등)
• 앱의 루트 페이지 (home) 설정

3. 기본적인 앱 구조 제공:

• Scaffold 위젯을 기본적으로 포함하여 앱 화면의 기본 구조를 제공합니다.
• AppBar, BottomNavigationBar, FloatingActionButton과 같은 공통 UI 요소들을 사용할 수 있도록 합니다.

 

Grade (Scaffold)

class Grade extends StatelessWidget {
  const Grade({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: const Text('BBRANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
        elevation: 0.0,
      ),
      body: const Padding(
      ... 중략 ...
      }
    }
 }

Scaffold

1. 필수적인 앱 화면 구조:

• AppBar: 화면 상단의 제목줄
• Body: 화면의 주요 콘텐츠 영역
• FloatingActionButton: 콘텐츠 위에 떠있는 선택적 작업 버튼
• BottomNavigationBar: 화면 하단의 네비게이션 바 (선택 사항)

2. 공통 UI 요소 통합:

• AppBar, Toolbar, TabBar와 같은 상위 레벨 네비게이션을 위한 UI 요소 쉽게 통합 가능
• 탭 기반 네비게이션을 위한 BottomNavigationBar
• 빠른 작업을 위한 FloatingActionButton
• 측면 메뉴 네비게이션을 위한 Drawer