UdacityのFlutterコース:「1.12Quiz: Code Your Own Category Widget」を解くと、アイコン付きリストができる。

はじめに

Flutterを勉強する際のガイドラインや教材を探していた。
どうやらUdacityのFlutter講座はGoogle制作の極めて良質な教材らしい。

引用記事:Flutterの効率良い学び方

そして、Flutterでの開発力を上げるためには、色々良いコンテンツがあって迷うところですが、今ならUdacity online Flutter Training(無料)が良いと思っています。今年2018年のGoogle I/O明けくらいにGoogleが提供した新し目のコースです。丁寧に作られた極めて良質な学習教材で、テンポ良く大事なことを凝縮して解説してくれています。

ということで平日夜、土日を使ってもくもく行ってますが、
教材の中の宿題(=Quiz)で簡単なアプリを手を動かしながら作ります。

動きました。完成品のソースコードが乗っけてます。
コースの具体的なイメージをつけていただければうれしいです。

完成品

ソース

main.dart

import 'package:flutter/material.dart';

import 'category.dart' show Category;

const _categoryName = 'cake';
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;

void main() {
  runApp(UnitConverterApp());
}

class UnitConverterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Unit Converter',
      home: Scaffold(
        backgroundColor: Colors.green[100],
        body: Center(
          child: Category(
            name: _categoryName,
            color: _categoryColor,
            iconLocation: _categoryIcon,
          ),
        ),
      ),
    );
  }
}

category.dart

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

final _rowHeight = 100.0;
final _borderRadius = BorderRadius.circular(_rowHeight / 2);

class Category extends StatelessWidget {
  final String name;
  final ColorSwatch color;
  final IconData iconLocation;

  const Category({
    Key key,
    @required this.name,
    @required this.color,
    @required this.iconLocation,
  })  : assert(name != null),
        assert(color != null),
        assert(iconLocation != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Container(
        height: _rowHeight,
        child: InkWell(
          borderRadius: _borderRadius,
          highlightColor: color,
          splashColor: color,
          onTap: () {
            print('I was tapped!');
          },
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Icon(
                    iconLocation,
                    size: 60.0,
                  ),
                ),
                Center(
                  child: Text(
                    name,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

リンク