【Flutter】テンプレートのプロジェクトを編集 Part2
"ElevatedButton" の追加
_MyHomePageState
クラスを編集していく. 各プログラムは以下のように対応している.
"floatingActionButton" の替わりに "ElevatedButton" を使って画面上にボタンを配置する.
- "floatingActionButton" は削除しておく.
- "ElevatedButton" の "onPressed" は "floatingActionButton" で使用していた
_incrementCounter
を使用する.
body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ElevatedButton( onPressed: _incrementCounter, child: const Text("+"), ), ], ), ),
実行結果
上記変更後, デバッグの開始を行うと以下のように画面が更新され, ボタンをタップすると画面上の数字が増えていくのを確認できる.
数字を減らすボタンの追加
今のままでは数字が増えるボタンしかないので, 減らすボタンも追加してみる.
- "_decrementCounter" という関数の追加
- "_incrementCounter"関数を元に, 以下のように "_decrementCounter" を新たに作成する.
void _decrementCounter() { setState(() { _counter--; }); }
- 数字を減らすボタンの追加
- "+" ボタンと同じように "-" ボタンを以下のように追加する.
children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ElevatedButton( onPressed: _incrementCounter, child: const Text("+"), ), + ElevatedButton( + onPressed: _decrementCounter, + child: const Text("-"), + ), ],
実行結果
上記編集後, デバッグを開始すると画像のようになり "-" ボタンを押すと数字が減っていくことを確認できる.
【Flutter】テンプレートのプロジェクトを編集 Part1
目次
プロジェクトの作成
VSCode に Flutter を既に導入した前提で以下をすすめていく.
コマンドパレット(Ctrl + Shift + P) を開き,新規プロジェクトを作成.
【Flutter: New Project】を選択
【Application】を選択
プロジェクトを置くフォルダを選択する(プロジェクト名は後程設定する).
プロジェクト名を決める.
作成されたプロジェクト
lib/main.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 MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } }
動作確認
デバイスの選択
実際に動作確認を行う際は最初にどのデバイスを使うか指定する必要がある.
VSCodeの以下の部分で確認できる.下の画像はデバイスが選択されていない状態なので, "No Device" 部分をクリックする.
クリックすると画像のようにデバイスが表示されるので, 使用したいデバイスを選択する.
選択後 "No Device" 部分を確認すると選択したデバイス名に替わっていれば完了.
デバッグの開始
デバッグの開始"F5", または void main()
にある "Run" を選択することでプログラムが実行される.
(void main()
にある "Run" を選択するとそのファイルがメインとなって実行される. デバッグの開始"F5" の場合は基本的に lib/main.dart
が実行される.)
無事に起動すると, 以下のような画面が表示. 右下の"+"ボタンをタップする度に真ん中の数字が増えていくのが確認できる.
次回からこのプロジェクトに変更を加えていく.