Flutter Example 无状态组件

image.png

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
    theme: new ThemeData(primarySwatch: Colors.green), home: new MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double textSize = 30.0;
    final double iconSize = 40.0;
    TextStyle textStyle = new TextStyle(color: Colors.grey, fontSize: textSize);
    var column = new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, //填充满元素
      children: <Widget>[
        new MyCard(
            title: new Text(
              "Favorite",
              style: textStyle,
            ),
            icon: new Icon(
              Icons.favorite,
              size: iconSize,
              color: Colors.red,
            )),
        new MyCard(
            title: new Text(
              "Alarm",
              style: textStyle,
            ),
            icon: new Icon(
              Icons.alarm,
              size: iconSize,
              color: Colors.blue,
            )),
        new MyCard(
            title: new Text(
              "Airport Shuttle",
              style: textStyle,
            ),
            icon: new Icon(
              Icons.airport_shuttle,
              size: iconSize,
              color: Colors.amber,
            )),
        new MyCard(
            title: new Text(
              "Done",
              style: textStyle,
            ),
            icon: new Icon(
              Icons.done,
              size: iconSize,
              color: Colors.green,
            ))
      ],
    );
    return new Scaffold(
        appBar:
            new AppBar(title: new Center(child: new Text("Stateless Widget"))),
        body: new Container(
          padding: EdgeInsets.only(bottom: 2.0),
          child: new Center(
            child: new SingleChildScrollView(
              child: column,
            ),
          ),
        ));
  }
}

class MyCard extends StatelessWidget {
  final Widget title;
  final Widget icon;

  // Constructor. {} here denote that they are optional values i.e you can use as: new MyCard()
  MyCard({this.title, this.icon});

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Card(
        child: new Container(
          padding: EdgeInsets.all(20.0),
          child: new Column(
            children: <Widget>[this.title, this.icon],
          ),
        ),
      ),
    );
  }
}