Flutter 中如何设计这种类型的仪表盘？

Question

1. 如何在颤振中创建这种类型的仪表板？

2. 这种仪表盘的名称是什么？

我添加了图像以供参考。

Answer 1

这应该有用

class SO extends StatefulWidget {
  @override
  _SOState createState() => _SOState();
}

class _SOState extends State<SO> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Foodie"),
      ),
      body: ListView.builder(
        itemCount: foods.length,
        itemBuilder: (BuildContext context, int index) {
          var food = foods[index];
          return ListTile(
            title: Text(food.name),
            subtitle: Text(food.detail),
            leading: FlutterLogo(),
            trailing: IconButton(
              icon: Icon(food.isFav ? Icons.favorite : Icons.favorite_border),
              onPressed: () => {
                setState(
                  () {
                    food.isFav = !food.isFav;
                  },
                )
              },
            ),
          );
        },
      ),
    );
  }
}

List<Food> foods = [
  Food('food 0', 'about food 0'),
  Food('food 1', 'about food 1'),
  Food('food 2', 'about food 2'),
  Food('food 3', 'about food 3'),
  Food('food 4', 'about food 4'),
  Food('food 5', 'about food 5'),
  Food('food 6', 'about food 6'),
];

class Food {
  final String name;
  final String detail;
  bool isFav;

  Food(this.name, this.detail, {this.isFav = false});
}

编辑：

用于仪表板背景

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[dashBg, content],
      ),
    );
  }

  get dashBg => Column(
        children: <Widget>[
          Expanded(child: Container(color: Colors.deepPurple),flex: 2,),
          Expanded(child: Container(color: Colors.transparent),flex: 5,),
        ],
      );

  get content => Container(
    margin: EdgeInsets.all(32),
    color: Colors.red,
    child: Center(child: Text('create your content inside this')),
  );
}

在这里用代码扩展这个

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[dashBg, content],
      ),
    );
  }

  get dashBg => Column(
        children: <Widget>[
          Expanded(
            child: Container(color: Colors.deepPurple),
            flex: 2,
          ),
          Expanded(
            child: Container(color: Colors.transparent),
            flex: 5,
          ),
        ],
      );

  get content => Container(
        child: Column(
          children: <Widget>[
            header,
            grid,
          ],
        ),
      );

  get header => ListTile(
    contentPadding: EdgeInsets.only(left: 20, right: 20, top: 20),
    title: Text(
      'Dashboard',
      style: TextStyle(color: Colors.white),
    ),
    subtitle: Text(
      '10 items',
      style: TextStyle(color: Colors.blue),
    ),
    trailing: CircleAvatar(),
  );

  get grid => Expanded(
        child: Container(
          padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
          child: GridView.count(
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            crossAxisCount: 2,
            childAspectRatio: .90,
            children: List.generate(8, (_) {
              return Card(
                elevation: 2,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8)
                ),
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[FlutterLogo(), Text('data')],
                  ),
                ),
              );
            }),
          ),
        ),
      );
}

给