반응형

들어가며

MaterialApp이란?

  • 앱의 기본적인 구조와 디자인을 정의하는데 사용되는 중요한 위젯 중 하나
  • Material Design 스타일의 앱을 개발하는 데 사용된다.
  • 앱의 기본적인 구성 요소 및 레이아웃을 설정하는 데 도움이 되는 여러 속성을 갖는다.
  • Flutter 앱의 최상위 위젯이다.

MaterialApp 속성

  • home: 앱이 시작될 때 표시되는 기본 화면을 설정
  • routes: 앱의 다른 화면으로 이동하기 위한 경로를 설정
  • theme: 앱의 전반적인 디자인 및 스타일을 지정하는 테마를 설정
  • title: 앱의 제목을 설정
  • navigatorKey: 네비게이터를 제어하는 데 사용되는 키를 설정
  • onGenerateRoute: 새로운 경로가 요청될 때 호출되는 함수를 설정

예제

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App', // 제목 설정
      theme: ThemeData( // 디자인 테마 설정
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(), // 기본 화면 설정
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to my Flutter app!'),
      ),
    );
  }
}

화면

반응형

'Development > Flutter' 카테고리의 다른 글

[Flutter] Icon  (0) 2024.02.18
[Flutter] Button  (1) 2024.02.18
[Flutter] Text  (0) 2024.02.18
[Flutter] Scaffold  (1) 2024.02.18
[Flutter] 프로젝트 생성하기  (0) 2024.02.17

+ Recent posts