😎

【Flutter】MaterialAppとScaffold

2023/04/24に公開

参考

MaterialApp

MaterialAppウィジェットは、Material Designアプリケーションのルートウィジェットとして使用されます。このウィジェットを使うことで、アプリ全体で共通のテーマやナビゲーション、ローカリゼーションなどの設定を簡単に行うことができます。通常、アプリケーションのエントリーポイントであるmain関数内でMaterialAppウィジェットを生成し、アプリケーションの構造を定義します。

Scaffold

Scaffoldウィジェットは、アプリケーションの基本的なレイアウトを提供するウィジェットです。Material Designに基づくアプリの構造を簡単に実装できるように設計されており、アプリバー(AppBar)、ドロワー(Drawer)、フローティングアクションボタン(FloatingActionButton)、ボトムナビゲーションバー(BottomNavigationBar)などの一般的なUIコンポーネントを簡単に追加できます。

サンプルコード

import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(
    title: 'My App',
    theme: ThemeData(primarySwatch: Colors.blue),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My App'),
      ),
      drawer: const Drawer(
        // Drawer content here
      ),
      body: const Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

サンプルコードのUI

Discussion