もうすぐこのコードラボも終了です。
習得したテクニックの知識をテストしたい場合は、それらのスキルを名刺を表示するFlutterUIの構築に適用してみましょう。
いきなりこのようなUIを作ろうと思うと難しく感じるかもしれませんが、結局一つ一つのウィジェットの組み合わせなので、分割して一つずつ作っていきましょう。
Part1では、名前とタイトルを含むColumnウィジェットを実装します。
次にそのColumnウィジェットをRowウィジェットでラップします。Rowウィジェットはicon(アイコン)を含んでいます。
右にアイコン、
左に名前とタイトルです。↓
Part2では、Part1で作ったRowをColumnでラップします。そして外側のColumnのレイアウトを操作して、見た目をよくします。
最後に外側のColumnの子ウィジェットとして連絡先情報を追加します。
ということでアイコン、名前、タイトルの下に連絡先情報が来ます。↓
Part3では、連絡先情報の下部に四つのアイコンを設置して、ビジネスカードを完成させます。↓
Contents
Part1
名前とタイトルを配置する。
●一番目のTextウィジェットの文字列==>Flutter McFlutter
●一番目のTextウィジェットのstyleプロパティ
==>Theme.of(context).textTheme.headline5
●二つ目のTextウィジェットの文字列==>Exprienced developer
Columnウィジェットの
mainAxisSizeプロパティをMainAxisSize.minにセットする。
crossAxisAlignmentプロパティをCrossAxisAlignment.startにセットする。
import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { runApp( MyApp(), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // Begin implementing the Column here. return Column( mainAxisSize:MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children:<Widget>[ Text( 'Flutter McFlutter', style:Theme.of(context).textTheme.headline5, ), Text('Experienced Developer'), ] ); } }
↓result
次に、前段で作ったColumnをRowでラップする。
以下の子ウィジェット・プロパティを指定したRowで、前段で作ったColumnをラップします。
- Iconウィジェット(Icons.account_circle,50px)
- Iconウィジェットの周りに8pxのPaddingを配置する(PaddingウィジェットでIconウィジェットをラップする)
↓
paddingプロパティを
const EdgeInsets.all(8.0)
に設定する。
import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { runApp( MyApp(), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // Begin implementing the Column here. return Row( children: [ Padding( padding:const EdgeInsets.all(8.0), child:Icon( Icons.account_circle, size:50, ), ), Column( mainAxisSize:MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children:<Widget>[ Text( 'Flutter McFlutter', style:Theme.of(context).textTheme.headline5, ), Text('Experienced Developer'), ] ), ], ); } }
↓result
Part2
レイアウトを整える。
前段までで作ったRowをColumnでラップします。
ColumnのmainAxisSizeプロパティをMainAxisSize.minにセットします。
ColumnのcrossAxisAlignmentプロパティをCrossAxisAlignment.stretchにセットします。
Columnは以下のウィジェットを子ウィジェットとして持ちます。
- heightが8のSizedBox
- 次のステップで連絡先情報を追加するための空のRow
- heightが16のSizedBox
- 後のステップでアイコンを追加するための空のRow
import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { runApp( MyApp(), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // Begin implementing the Column here. return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ Padding( padding:const EdgeInsets.all(8.0), child:Icon( Icons.account_circle, size:50, ), ), Column( mainAxisSize:MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children:<Widget>[ Text( 'Flutter McFlutter', style:Theme.of(context).textTheme.headline5, ), Text('Experienced Developer'), ] ), ], ), SizedBox( height:8, ), Row(children:[Text('aaaaaaa')]), SizedBox( height:16, ), Row(children:[Text('bbbbbbb')]), ], ); } }
↓result
‘aaaaaa’,’bbbbbb’は、空だとわかりにくいので、
変化がわかりやすいようにとりあえず入れただけです。
次にRowに連絡先情報を追加する。
‘aaaaaaa’が入っているRowの中身を次の子ウィジェットに置き換える。
一番目ののTextウィジェット。文字列は’123 Main Street’。
二番目のTextウィジェット。文字列は'(415) 555-0198’。
RowのmainAxisAlignmentプロパティをMainAxisAlignment.spaceBetweenに設定する。
import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { runApp( MyApp(), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // Begin implementing the Column here. return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon( Icons.account_circle, size: 50, ), ), Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'Flutter McFlutter', style: Theme.of(context).textTheme.headline5, ), Text('Experienced Developer'), ]), ], ), SizedBox( height: 8, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('123 Main Street'), Text('(415) 555-0198'), ]), SizedBox( height: 16, ), Row(children: [Text('bbbbbbb')]), ], ); } }
↓result
Step3
iconを追加する。
‘bbbbbb’が入っているRowに以下の四つのIconウィジェットを追加します。
- Icons.accessibility
- Icons.timer
- Icons.phone_android
- Icons.phone_iphone
RowのmainAxisAlignmentプロパティをMainAxisAlignment.spaceAroundに設定する。
import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { runApp( MyApp(), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: MyWidget(), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // Begin implementing the Column here. return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon( Icons.account_circle, size: 50, ), ), Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'Flutter McFlutter', style: Theme.of(context).textTheme.headline5, ), Text('Experienced Developer'), ]), ], ), SizedBox( height: 8, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('123 Main Street'), Text('(415) 555-0198'), ]), SizedBox( height: 16, ), Row( mainAxisAlignment:MainAxisAlignment.spaceAround, children: [ Icon(Icons.accessibility), Icon(Icons.timer), Icon(Icons.phone_android), Icon(Icons.phone_iphone), ]), ], ); } }
↓result
次は?
おめでとうございます。完成です。
さらに学びたい場合以下のリソースがおすすめです。
さらにFlutterのレイアウトについて学びたい場合Building layouts。
sample apps.をチェックしましょう。
参考
https://flutter.dev/docs/codelabs/layout-basics
https://flutter.dev/docs/codelabs/layout-basics#putting-it-all-together