目次
概要
アプリを作っていると、画面の右上にボタンを設置したい時がよくある。
そんなときにはAppBarの中にactionsを設定することで実現ができる。
ソースコード
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:concentration/TransitionView/TopView.dart';
void main() async{
runApp(ProviderScope(child: 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.deepOrange),
useMaterial3: true,
),
home: TopView(),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'SubView.dart';
class TopView extends ConsumerWidget {
const TopView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text("遷移前の画面"),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () => {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SubView())
)
},
)
]
),
body: Container(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => SubView())
);
},
style: ElevatedButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
elevation: 5,
),
child: Text("画面遷移するよ!"),
),
)
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SubView extends ConsumerWidget {
const SubView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text("遷移後の画面"),
),
body: Container(
alignment: Alignment.center,
child: Text("新たなる大地"),
)
);
}
}
デモ動画
詳細
今回の内容は至って簡単だ。
画面の左上にボタンを設置するには、画面の表示をしているTopViewのAppBarにactionsという引数にUIを設置してあげればいい。
今回の場合、この部分だ。
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () => {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SubView())
)
},
)
]
やっていることは本当に難しくない。
今まではContainerやRowなどの中のchildやchildrenに表示するViewを書いていたが、
今回はactionsに設定するだけだ。
ボタンを押下したした時の書き方も、さまざまなボタンを生成に記載した通りだし、
画面遷移の方法も画面遷移のページで記載した。
こう見てみると、何事もコツコツ積み上げていけばできることは一気に増えていく。