【Flutter】作成したページを別のファイルを作成に分割する
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);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text("Home Page"),
),
);
}
}

image2

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

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

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

dart
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
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);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}

では、動作確認してみましょう。

image3

無事、別ファイルの画面を表示することができました。

試しに、home.dart のTextを『Home Page』から『My other Home Page』へ変更してみると、

image4

画面のテキストが変わりました。

© 2024あずきぱんウェブスタジオ