はじめまして! エキサイト株式会社で長期インターン をしている井関です。
まだまだ、Flutterを勉強中ですが、アウトプットや繰り返し使えるためにどんどん書いていきます👍
目次
基本的にコピペでできるとは思いますが、違うプロジェクトでペーストしたら、おそらくエラーが発生すると思います。なので、フォーマットを作っておくので、それを参考にしてもらっても構いません。初期サンプルコードを使用しているので、わかりやすいと思います。いくつか削除していますが、少しの修正なので気にせずに。
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: () {
},
ちなみに、画面はこんな感じです。
写真1
①まるばつクイズ風(横に均等に並べる)
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 ,),
②3択クイズ風(縦に並べる)
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 ),
padding: EdgeInsets.only(top: 30 )
・種類
上 top: 30,
右 right: 30,
下 bottom: 30,
左 left: 30,
と4種類あります。自由に使ってみるといいと思います。
padding: EdgeInsets.symmetry(horizontal: 30 );
horizontal => 水平 = 右と左と考えると分かりやすいと思います。
vertical => 垂直 = 上と下と考えると分かりやすいと思います。
最後に
まだFlutter初心者の私ですが、同じ境遇な方にとっていい手助けになるよう、わかりやすさにこだわってこれからも書いていこうと思います!!!業務中以外にも個人開発でFlutterを勉強している生活を送っています。新しい発見の毎日なので、ワクワクしながらコードを書いています😁
いつか、個人で開発しているアプリが紹介できるくらいいいものになった際に、紹介できたらいいなと思います!!
一通り作成してみて、趣味で作成している個人開発に利用したいと思うようになりました笑
エキサイトでは、一緒に働けるモバイルアプリエンジニアを募集しています!
もし興味がありましたら是非こちらのリンクから、お話しましょう!
www.wantedly.com