2020/10/19 Flutter : Putting it all togetherの訳 | 今、プログラミングを学ぶ

もうすぐこのコードラボも終了です。

習得したテクニックの知識をテストしたい場合は、それらのスキルを名刺を表示するFlutterUIの構築に適用してみましょう。

Completed business card

いきなりこのようなUIを作ろうと思うと難しく感じるかもしれませんが、結局一つ一つのウィジェットの組み合わせなので、分割して一つずつ作っていきましょう。

Part1では、名前とタイトルを含むColumnウィジェットを実装します。

次にそのColumnウィジェットをRowウィジェットでラップします。Rowウィジェットはicon(アイコン)を含んでいます。

右にアイコン、

左に名前とタイトルです。↓

Completed business card

Part2では、Part1で作ったRowをColumnでラップします。そして外側のColumnのレイアウトを操作して、見た目をよくします。

最後に外側のColumnの子ウィジェットとして連絡先情報を追加します。

ということでアイコン、名前、タイトルの下に連絡先情報が来ます。↓

Completed business card

Part3では、連絡先情報の下部に四つのアイコンを設置して、ビジネスカードを完成させます。↓

Completed business card

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

Part1

Part2

Step3

次は?

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル