スポンサーリンク

【Flutter】ボタンクリックで表示を切り替える方法ご紹介。

Flutter
スポンサーリンク

今回の記事はFlutterでボタンクリックにより画面表示を切り替える方法をご紹介する記事です。ボタンクリックで画面表示を切り替える操作はアプリケーションでよく使用すると思います。Flutter初学者でも簡単に理解できるようにサンプルコードを用いて解説を行っていきます。是非参考にしてみてください。

スポンサーリンク

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.
    );
  }
}

現状、ボタンのクリックイベントには何も設定していないので、クリックしても何も起きません。

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

ボタンにイベントをつける手順

下記ソースの「onPressed」の中にボタンクリック時のイベントを記載します。

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するとボタンクリックでページが閉じるようなアプリが起動できます。

ボタンクリックで文字表示を入れ替える方法

下記がサンプルソースです。

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 = 'クリックした';
      }
    });
  }
}

下記が画面に文字を表示している部分です。

child: Text(_message, style: TextStyle(fontSize: 50))

上記の_message部分をボタンクリック操作によって入れ替えて表示させることで、画面表示を切りけることができます。

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

ボタンをクリックすると交互にクリックされたかされていないかを表示可能になっております。

今回の記事は以上です。初心者がまずとっかかりやしところから順番に記載しております。他にもFlutter記事をいくつか書いているので気になる方は是非サイト内みて行ってください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Flutter
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました