【Flutter】ボタンクリックで文字表示を行う手順ご紹介。

Flutter

2021.01.04

今回の記事はFlutterでボタンを表示させ、そのボタンをクリックすることでページ内に文字を出力する基本的なサンプルを作成するための手順をご紹介します。

私はFlutter初心者なので初心者用の記事になります。できるだけ簡単に書いていくので是非ご参照ください。

実行環境はAndroid Studioの4.0です。Flutterの環境構築に関してはこちらのリンクからご確認いただけると幸いです。

流れとしては「ボタンクリック」→「Action起動」→「文字表示」になりますのでその挙動に沿って話を進めていきます。

では早速取り掛かっていきます。

Flutterでボタンクリックを行う手順
Flutterでボタンクリック時にActionを行う手順
Flutterで文字を表示させる方法

Flutterでボタンクリックを行う手順

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: Center(
        child: RaisedButton(
          child: const Text('ボタン'),
          
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState 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>[
            Text(
              'Hello World',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

上記をbuildするとボタンの表示ができます。

ボタンをクリックしても何も処理は回りません。

初心者なりにわかったことをまとめておくと「main()」関数でおそらく関数を回している。その関数内に動的な処理を書く。

次にページレイアウトとして「MyHomePage」関連のクラスにextendで拡張させてレイアウトを追加しているという流れでしょう。

少しつかめてきましたね。では次にボタンにアクションを追加です。

Flutterでボタンクリック時にActionを行う手順

次に上記のコードの下記「ここに処理を書くという箇所にAction内容を設定します。」

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: Center(
        child: RaisedButton(
          child: const Text('押したら終了'),
          onPressed: () {
            /////////////////
            //ここに処理を書く//
            /////////////////
            SystemNavigator.pop();
            //今回は例としてページを閉じるボタンを設定
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState 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>[
            Text(
              'Hello World',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

上記をbuildするとボタンクリックでページが閉じます。

書き方がなんか枝構造,HTMLみたいな感じで少しWebページを作成する感覚に近いような感じがします。

Xcodeとは違いますね。

Flutterで文字を表示させる方法

最後にボタンクリックで文字を表示させてみましょう。

先ほどまでの状態だとボタンのみの表示になっていたので「Column」という構造（リスト表示のようなもの）を用いてページを作成していきます。「Column」の使い方に関してはこちらのリンクページからきになる方はご参照ください。

import 'package:flutter/material.dart';

var ok = false;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {

  int count = 0;
  String _message = 'Tap this button.';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Text(_message, style: TextStyle(fontSize: 50))
              ),
              Container(
                child: RaisedButton(
                  child: Text("button"),
                  onPressed: _onPressed
                )
              )

            ],
          ),
        ),
      ),
    );
  }

  void _onPressed() {
    setState(() {
      if (ok == false) {
        print("false");
        ok = true;
        _message = 'クリックされていない';
      } else {
        print("true");
        ok = false;
        _message = 'クリックした';
      }
    });
  }
}

少々中身を変更しております。
Columnを使ってリストのようにテキストを上に表示させてボタンをその下に設置させております。