はじめまして！ エキサイト株式会社で長期インターンをしている井関です。
まだまだ、Flutterを勉強中ですが、アウトプットや繰り返し使えるためにどんどん書いていきます👍
目次
Widgetを作成する
基本的にコピペでできるとは思いますが、違うプロジェクトでペーストしたら、おそらくエラーが発生すると思います。なので、フォーマットを作っておくので、それを参考にしてもらっても構いません。初期サンプルコードを使用しているので、わかりやすいと思います。いくつか削除していますが、少しの修正なので気にせずに。
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'ダイアログ'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'ダイアログ', ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { //押したら、ダイアログを出現させる。 }, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }
その中の、OnPressedにメソッドを書いていきます。
onPressed: () { //押したら、ダイアログを出現させる。 },
ちなみに、画面はこんな感じです。
①まるばつクイズ風（横に均等に並べる）
Widget Dialog() {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text(
'第一問目',
textAlign: TextAlign.center),
content: Text(
'南極で暮らす恐竜がいた。○か×か？'
,textAlign: TextAlign.center),
actions: [
Padding(
padding: const EdgeInsets.only(
left: 70,
right: 20,
bottom: 20
),
child: FlatButton(
onPressed: () {
//○だった時の処理を記載
},
child: Text(
'○',
style: TextStyle(
color: Colors.blue,
fontSize: 40,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
right: 70,
left: 20,
bottom: 20,
),
child: FlatButton(
onPressed: () {
//×だった時の処理を記載
},
child: Text(
'×️',
style: TextStyle(
color: Colors.red,
fontSize: 40),
),
),
),
],
);
}
);
}
<解説>
actions: []は、基本的に、右寄せになってしまう。（基本的に右寄せがフォーマットなのかなと思っています。） mainAxisSize: MainAxisSize.centerやCenter() を入れても変わりませんでした。勉強していつか解明できるといいな〜〜 そのため、Paddingを活用することで無理やり入れみてました。
//左側 Padding(padding: const EdgeInsets.only(left: 70,right: 20,,bottom: 20,),
//右側 Padding(padding: const EdgeInsets.only(right: 70,left: 20,bottom: 20,),
②３択クイズ風（縦に並べる）
Widget Dialog() {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text(
'第一問目',
textAlign: TextAlign.center),
content: Text(
'ティラノサウルスの全身の骨の数は？'
,textAlign: TextAlign.center),
actions: [
Column(
children: [
FlatButton(
padding: const EdgeInsets.symmetric(horizontal: 100),
onPressed: () {
//①だった時の処理を記載
},
child: Text(
'①約350本',
style: TextStyle(
fontSize: 20,
),
),
),
FlatButton(
padding: const EdgeInsets.symmetric(horizontal: 100),
onPressed: () {
//②だった時の処理を記載
},
child: Text(
'②約500本',
style: TextStyle(
fontSize: 20,
),
),
),
FlatButton(
padding: const EdgeInsets.symmetric(horizontal: 100,),
onPressed: () {
//③だった時の処理を記載
},
child: Text(
'③約820本',
style: TextStyle(
fontSize: 20,
),
),
),
],
),
],
);
}
);
}
}
<解説>
Column()を入れて、縦に並べました。そして、均等に並べるために、Paddingを使用しました。
padding: const EdgeInsets.symmetric(horizontal: 100),
おまけ
Paddingについて
ここで簡単にPaddingの種類を紹介します。
padding: EdgeInsets.all(30), //全体に30ピクセル隙間を空ける。
padding: EdgeInsets.only(top: 30) //上のみに30ピクセル隙間を空ける。
・種類
上 top: 30,
右 right: 30,
下 bottom: 30,
左 left: 30,
と４種類あります。自由に使ってみるといいと思います。
padding: EdgeInsets.symmetry(horizontal: 30); //水平に30ピクセル隙間を空ける。
horizontal => 水平 ＝ 右と左と考えると分かりやすいと思います。
vertical => 垂直 ＝ 上と下と考えると分かりやすいと思います。
最後に
まだFlutter初心者の私ですが、同じ境遇な方にとっていい手助けになるよう、わかりやすさにこだわってこれからも書いていこうと思います！！！業務中以外にも個人開発でFlutterを勉強している生活を送っています。新しい発見の毎日なので、ワクワクしながらコードを書いています😁
いつか、個人で開発しているアプリが紹介できるくらいいいものになった際に、紹介できたらいいなと思います！！
一通り作成してみて、趣味で作成している個人開発に利用したいと思うようになりました笑
エキサイトでは、一緒に働けるモバイルアプリエンジニアを募集しています！ もし興味がありましたら是非こちらのリンクから、お話しましょう！ www.wantedly.com
