Flutter

【Flutter】作成したページを別のファイルを作成に分割する

作成日：2022年03月26日

更新日：2022年03月26日

見通しを良くするために、Flutter でページごと別のファイルに分割します。

main.dart で、以下のコードがあるとします。

dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("Home Page"),
      ),
    );
  }
}

こちらのページを、別のファイルにします。

まず、pages フォルダを作成し、home.dart を作成します。

main.dart の MyHomePage をコピーし、home.dart に貼り付けます。

dart
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("Home Page"),
      ),
    );
  }
}

このままではエラーが発生しているので、material.dart をインポートします。

dart
import 'package:flutter/material.dart';

main.dart に戻り、home.dart をインポートします。

dart
import 'package:tests/pages/home.dart';

MaterialApp ないの home にMyHomePageを設定します。

dart
import 'package:flutter/material.dart';
import 'package:tests/pages/home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}