flutterのチュートリアル 

flutterのチュートリアル。メモ程度に残していく。

○成果物
![スクリーンショット 2021-12-14 16.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/4626ecbd-3b9f-2a55-08bb-41bfcc3c779c.png)

```dart:main.dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) :super(key: key);

  @override
  Widget build(BuildContext context){
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(child: Column( // Expandedは余白いっぱいに広がるWidget。
            crossAxisAlignment: CrossAxisAlignment.start, // start	Rowなら左寄せ、Columnなら上寄せになる
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 8), // 余白の調整。
                child: const Text(
                  'Oeschinen Lake Campground', 
                  style: TextStyle(
                    fontWeight: FontWeight.bold, // 太字
                  ),
                ),
              ),
              Text(
                'Kandersteg Switzerland',
                style: TextStyle(color: Colors.grey[500],), // 色をグレイにする。
              )
            ],
          )),
          Icon(
            Icons.star, // materialに事前登録すみのstarが表示される。
            color: Colors.red[500],
          ),
          const Text('41'),
        ],
      ),
    );

    Color color = Theme.of(context).primaryColor;

    Widget buttonSection = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildButtonColumn(color, Icons.call, 'CALL'),
        _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
        _buildButtonColumn(color, Icons.share, 'SHARE'),
      ],
    );

    Widget textSection = const Padding(
      padding: EdgeInsets.all(32),
      child: Text(
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
        'Alps. Situated 1,578 meters above sea level, it is one of the '
        'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
        'half-hour walk through pastures and pine forest, leads you to the '
        'lake, which warms to 20 degrees Celsius in the summer. Activities '
        'enjoyed here include rowing, and riding the summer toboggan run.',
        softWrap: true,
      ),
    );

    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('k.k.Factory Demo'),
        ),
        body: ListView( // ListView
          children: [
            Image.asset(
              'images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        )
      )
    );
  }

  Column _buildButtonColumn(Color color, IconData icon, String label){
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center, // childrenの並べる順番を指定。中央から並べる。
      children: [
        Icon(icon, color: color),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label, 
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        )
      ],
    );
  }
}
```

※画像はimagesフォルダに画像を保存。その上でpubspec.ymlにも定義を追加する。

```
flutter:
  uses-material-design: true
  assets:
    - images/lake.jpg