特集2 FlutterでGUIアプリを開発しよう（Vol.79記載）
著者：三好 文二郎
「Flutter」は、米Google社がOSS（オープンソースソフトウエア）として提供する、GUI アプリ開発用のSDK（Software Development Kit）です。単一のコードで複数のプラットフォーム向けのGUIアプリを作成できるほか、標準で用意されるUIコンポーネントが豊富、Hot Reloadによる開発者体験が素晴らしいことなどから開発者の間で人気が高まっています。Flutterの概要と、Flutterを利用したアプリ開発方法について紹介します。
シェルスクリプトマガジン Vol.79は以下のリンク先でご購入できます。
図18 ウィジェットに関する記述の例
|
1 2 3 4 5 6 7 8 9 |
children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], |
図19 ボタンウィジェットを追加するコードの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), MaterialButton ( color: Colors.cyan.withOpacity(0.7), shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(30.0)), onPressed: () {}, child: const Text('this is a button widget'), ), ], |
図21 my_first_appプロジェクトの「pubspec.yaml」ファイルの内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
name: my_first_app description: A new Flutter project. publish_to: "none" version: 1.0.0+1 environment: sdk: ">=2.16.2 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^1.0.0 flutter: uses-material-design: true |
図22 go_routerパッケージを利用する場合の記述例
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 go_router: ^3.1.1 |
図23 画面を追加するためのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class NavigatedPage extends StatelessWidget { const NavigatedPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('navigated page'), ), body: const Center( child: Text('navigated with go_router'), ), ); } } |
図24 画面遷移のためのコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class MyApp extends StatelessWidget { MyApp({Key? key}) : super(key: key); final _router = GoRouter( routes: [ GoRoute( path: '/', builder: (context, state) => const MyHomePage(title: 'Flutter Demo Home Page'), ), GoRoute( path: '/navigated', builder: (context, state) => const NavigatedPage(), ), ], ); @override Widget build(BuildContext context) { return MaterialApp.router( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), routeInformationParser: _router.routeInformationParser, routerDelegate: _router.routerDelegate); } } |
図25 ボタンウィジェットに画面遷移処理を割り当てるコード
|
1 2 3 4 5 6 7 8 |
MaterialButton ( color: Colors.cyan.withOpacity(0.7), shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(30.0)), onPressed: () { GoRouter.of(context).go('/navigated'); }, child: const Text('Navigate'), ), |
図26 main()関数のコードを変更
|
1 2 3 |
void main() { runApp(MyApp()); } |