今回は、Flutterアプリ(バスケのランニングスコア入力アプリ)にホームスクリーンを追加し、3つの異なるボタンから各機能へ遷移できるようにします。これにより、アプリの操作性が向上し、ユーザーは必要な機能に迅速にアクセスできるようになります。
ホームスクリーンの設計
ホームスクリーンには以下の3つのボタンを配置します：
- チーム登録
- スコア入力
- 設定
ボタンのサイズとスタイル
ボタンはユーザーが押しやすいように大きくし、視覚的にもわかりやすいスタイルにします。
コード実装
以下の手順でホームスクリーンを追加します。
Step 1: 必要なインポートを追加
まず、home_screen.dartファイルを作成し、以下のように必要なインポートを追加します。
import 'package:flutter/material.dart';
import 'main.dart'; // ScoreHomePageをインポートStep 2: ホームスクリーンの作成
次に、HomeScreenクラスを定義します。このクラスでは、3つのボタンを配置します。
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ホーム'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => TeamRegistrationScreen()),
);
},
style: ElevatedButton.styleFrom(
minimumSize: Size(200, 60), // ボタンの幅と高さを設定
textStyle: TextStyle(fontSize: 24), // フォントサイズを大きくする
),
child: Text('チーム登録'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScoreHomePage()),
);
},
style: ElevatedButton.styleFrom(
minimumSize: Size(200, 60), // ボタンの幅と高さを設定
textStyle: TextStyle(fontSize: 24), // フォントサイズを大きくする
),
child: Text('スコア入力'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SettingsScreen()),
);
},
style: ElevatedButton.styleFrom(
minimumSize: Size(200, 60), // ボタンの幅と高さを設定
textStyle: TextStyle(fontSize: 24), // フォントサイズを大きくする
),
child: Text('設定'),
),
],
),
),
);
}
}Step 3: その他のスクリーンの作成
次に、”チーム登録”と”設定”のスクリーンを仮のものとして作成します。
class TeamRegistrationScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('チーム登録'),
),
body: Center(
child: Text('チーム登録画面', style: TextStyle(fontSize: 24)),
),
);
}
}
class SettingsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('設定'),
),
body: Center(
child: Text('設定画面', style: TextStyle(fontSize: 24)),
),
);
}
}Step 4: メイン関数の修正
最後に、アプリのメイン関数を修正して、最初にHomeScreenが表示されるようにします。
void main() {
runApp(BasketballScoreApp());
}
class BasketballScoreApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'バスケットボール スコア入力アプリ',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(), // ホームスクリーンを最初に表示
debugShowCheckedModeBanner: false,
);
}
}最後に
以上のステップを実施することで、アプリ起動時にホームスクリーンが表示され、ユーザーは簡単に各機能にアクセスできるようになります。
コメント