【flutter初心者】画面の構成とファイル分割

flutter初心者（自分）がアプリを作るにあたり最初に困ったのでメモ。
おそらく初歩的過ぎてちゃんと説明してるところがあまり見当たらなかったので。

よくあるサンプルコードは大体こんな感じになってることが多いです。

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
        ),
      ),
    );
  }
}

ふむふむ、main処理のrunAppメソッドでMyApp クラスを呼び、MyAppクラスで画面全体のウィジェットをビルド・・・なるほど。

これはこれでなるほどよく分かるのですが、「じゃあボタンを押して新しい画面を開くには」どうすればよいか？

画面（ビュー）はScaffoldウィジェットが親になる、と考えて良いかと思います。（Scaffoldはアプリケーションバーやbodyを持つウィジェットです）。

なので新しい画面を開くには
・新しい画面をビルドするクラスを定義する。
・このクラスはScaffoldをリターンする。

とすればOKです。この新しいクラスを別ソースファイルにすることで、画面ごとにファイル分割が可能です。

上記を改修したサンプルはこちら

main.dart

import 'package:flutter/material.dart';
import './newview1.dart';  //★１ 外出ししたファイルのインポート

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('main画面のタイトルバー'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('ボタン'),
          //★２ 画面遷移のボタンイベント
          onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) {
            return NewView1();
          })),
          //★２追加ここまで
        ),
      ),
    );
  }
}

★１、★２を追記

newview1.dart （新しい画面用のファイル/クラス）

import 'package:flutter/material.dart';

class NewView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('NewView1のタイトルバー'),
      ),
      body: Center(
        child: Text('NewView1'),
      ),
    );
  }
}

これで、初期表示画面の上に新しい画面が表示されます。
このような形で画面/機能ごとにソースファイルを分割していくことが可能です。