垂直布局_ico

 

 

import 'package:flutter/material.dart';
import 'res/listData.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("flutterDemo")),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.blue.shade300,
      child: Column(
        // // 主轴的排列顺序
        mainAxisAlignment: MainAxisAlignment
            .spaceEvenly, // start end spaceEvenly center spaceAround spaceBetween
        crossAxisAlignment:
            CrossAxisAlignment.center, // center start end stretch
        children: [
          IconContainer(Icons.search, Colors.blue, 35.0),
          IconContainer(Icons.home, Colors.orange, 35.0),
          IconContainer(Icons.pages, Colors.red, 35.0),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  IconData icon;
  Color color = Colors.red;
  double size;

  IconContainer(this.icon, this.color, this.size);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(
          this.icon,
          size: this.size,
          color: Colors.white,
        ),
      ),
    );
  }
}