今回の記事はFlutterでボタンを表示させ、そのボタンをクリックすることでページ内に文字を出力する基本的なサンプルを作成するための手順をご紹介します。
私はFlutter初心者なので初心者用の記事になります。できるだけ簡単に書いていくので是非ご参照ください。
実行環境はAndroid Studioの4.0です。Flutterの環境構築に関してはこちらのリンクからご確認いただけると幸いです。
流れとしては「ボタンクリック 」→「Action起動」→「文字表示」になりますのでその挙動に沿って話を進めていきます。
では早速取り掛かっていきます。
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を使ってリストのようにテキストを上に表示させてボタンをその下に設置させております。
ボタンをクリックすると交互にクリックされたかされていないかを表示可能になっております。
先ほどまでは機能が少なかったためtap関数をを直接ボタン内に記述していましたが少し助長になっていたので別に関数を作成しております。「setState()」関数がページ内のテキスト表示を変更する役割を持っている関数になります。是非抑えておきましょう。
今回の記事は以上です。初心者がまずとっかかりやしところから順番に記載しております。他にもFlutter記事を現在進行形でいくつか書いているのできになる方は是非ご参照ください。
コメント