今日から始めるFlutter勉強生活（３日目）

Icons Class

プリセットされたアイコンを使える。

Card Class

カードデザインを適用できるContainer。

Padding Class

パディングを含んだ上で小要素を持てるContainer。

Divider Class

区切り線を引けるウィジェット。

今回でできたもの

import ‘package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.*teal*,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircleAvatar(
                radius: 50,
                backgroundImage: AssetImage(‘images/umaru_icon.png’),
              ),
              Text(
                ‘Umaru Doma’,
                style: TextStyle(
                  fontSize: 40.0,
                  color: Colors.*white*,
                  fontWeight: FontWeight.*bold*,
                  fontFamily: ‘Pacifico’,
                ),
              ),
              Text(
                ‘FAMOUS ANIME CHARACTER’,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 21.0,
                  color: Colors.*white70*,
                  fontFamily: ‘SourceSansPro’,
                  letterSpacing: 2.5,
                ),
              ),
              SizedBox(
                height: 20,
                width: 150,
                child: Divider(
                  color: Colors.*teal*[100],
                ),
              ),
              Card(
                margin: EdgeInsets.fromLTRB(32, 10, 32, 0),
                child: ListTile(
                  title: Text(‘+81 1234 5678’),
                  leading: Icon(
                    Icons.*account_circle*,
                    color: Colors.*teal*,
                  ),
                ),
              ),
              Card(
                margin: EdgeInsets.fromLTRB(32, 10, 32, 0),
                child: ListTile(
                  title: Text(‘example@example.com’),
                  leading: Icon(
                    Icons.*email*,
                    color: Colors.*teal*,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}