flutter简单布局入门demo

布局效果
代码`
import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
//此处定义
final titleText = Container( //一般都定义成Container
padding: EdgeInsets.all(20),
child: Text(
‘定义一个标题’,
style: TextStyle(
fontWeight: FontWeight.w800,
letterSpacing: 0.5,
fontSize: 28
),
),

);

//定义副标题
final subtitle = Text(
  '不是标题是文本啊 疫情严重  在家学习flutter,laiya 苦熬快活啊   为什么  怎么办 我的人啊 希望你 遇见了就少疫情严重 就不要出来饿了啊',
  textAlign:TextAlign.center,
  style: TextStyle(
    letterSpacing: 0.5,
    fontSize: 20
  ),

    );
final ratings = Container(
  padding:EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//排列方式  均匀分布  五颗星
    children: <Widget>[
      Row(
        children: <Widget>[ Icon(Icons.star,color: Colors.black,),
          Icon(Icons.star,color: Colors.black,),
          Icon(Icons.star,color: Colors.black,),
          Icon(Icons.star,color: Colors.black,),
          Icon(Icons.star,color: Colors.black,)],
      ),
      Text('100分',
        style: TextStyle(
          fontSize: 18
        ),
      )
    ],
  ),
);

/**
 * 定义一个样式  用于大多数相同字体
 */
final myTextStyle =TextStyle(
  color: Colors.black87,
  fontSize: 26,
  fontFamily: 'Roboto',
  letterSpacing: 0.2
);

final iconList =DefaultTextStyle.merge( //合并一个样式22和我自定义的一起
    style: myTextStyle,//这就是我们合并的样式
  child: Container(
    padding: EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,//排列方式

      children: <Widget>[
        Column(
          children: <Widget>[
            Icon(Icons.access_alarm),
            Text('时间'),
            Text('一周')
          ],
        ),
        Column(
          children: <Widget>[
            Icon(Icons.account_balance),
            Text('地址'),
            Text('北京')
          ],
        ),
        Column(
          children: <Widget>[
            Icon(Icons.add_call),
            Text('电话'),
            Text('110')
          ],
        )
      ],
    ),
    
  )
);
final leftColumn = Container(
  padding: EdgeInsets.symmetric(horizontal: 20,vertical: 30),  //指定间距  还有其他方法
  child: Column(
    children: <Widget>[
      titleText,
      subtitle,
      ratings,
      iconList
    ],
  ),

);
final mainImage=Image.asset('assets/images/timg.jpg',
  fit: BoxFit.cover,
);


return MaterialApp(
  title: 'flutter应用',//任务管理器name  只有安卓应用才有
  theme: ThemeData
    (primarySwatch: Colors.blue,
  ),
  home: Scaffold(  //这是应用的主页  scaffold 是一种标准的布局  里面有appbar
    appBar: AppBar(
      title: Text('哈哈哈啊哈')
    ),
        body:Center(
          child:Container(
            margin: EdgeInsets.all(10),
            height: 600,
            child: Card(
              child: Row(
                children: <Widget>[Container(
                    width: 440,
                    child: leftColumn,//防止嵌套过深  提出来封装成一个组件

                ),mainImage
                ],

              ),
            ),
          ),
        ),
    ) ,
  );

}

}
`