Flutterの初歩的なところ

main.dartの最低限の部分
自分用＆勉強中なので間違ってたらごめんなさい

パッケージのインポート

import 'package:flutter/material.dart';

メイン関数

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

• runApp()でMyAppを起動

ルートウィジェット

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

• アプリケーションの土台部分
• StatelessWidgetではbuildメソッドが必要
• Widgetを返してウィジェットの見た目を定義
• はじめにUIの基盤となる'MaterialApp()'を返す

ここまで書いてRunを押すと、真っ白なページが表示される。

MaterialApp()はただの入れ物なのでさらにウィジェットツリーを構築して見た目を作っていく。

MaterialApp

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold());
  }
}

• MaterialApp()のhomeにScaffold()という画面のレイアウトを作るウィジェットを指定

画面の背景がピンクっぽくなる。

他にもtitleとかthemeとかを指定できる。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      home: Scaffold(),
    );
  }
}

Scaffold

画面のレイアウトを定義していく。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: Center(child: Text("Hello World!")),
      ),
    );
  }
}

• appBar: 画面の上の方に表示されるやつ
• body: メインコンテンツを表示する

画面がそれっぽくなってくる。

その他

入れ子が多くなるので、ウィジェットを分割する。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(child: Text("Hello World!")),
    );
  }
}

• Scaffoldの部分をMyHomePageクラスにまとめる