今回の記事は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記事をいくつか書いているので気になる方は是非サイト内みて行ってください。
コメント