1度帮、第一個布局
import?'package:flutter/material.dart';
//?Uncomment?lines?7?and?10?to?view?the?visual?layout?at?runtime.
//?import?'package:flutter/rendering.dart'?show?debugPaintSizeEnabled;
void?main()?{
??runApp(MyApp());
}
class?MyApp?extends?StatelessWidget{
??@override
??Widget?build(BuildContext?context)?{
????Widget?titleSection?=?Container(
??????padding:?const?EdgeInsets.only(bottom:?11,top:?11,left:?11),
??????color:?Colors.grey,
??????child:?Row(
????????children:?<Widget>[
??????????/*1*/
??????????Expanded(child:?Column(
????????????crossAxisAlignment:?CrossAxisAlignment.start,
????????????children:?<Widget>[
??????????????/*2*/
??????????????Container(
????????????????color:?Colors.lightGreen,
????????????????padding:?const?EdgeInsets.only(top:?0,bottom:?8,left:?0),
????????????????child:?Text('text1',style:?TextStyle(fontWeight:?FontWeight.bold),),
??????????????),
??????????????Text('text2',style:?TextStyle(color:?Colors.red[500]),),
????????????],
??????????)),
??????????Container(
????????????height:?100,
????????????color:?Colors.green,
????????????padding:?const?EdgeInsets.only(right:?0,top:?0),
????????????child:?Icon(Icons.star,color:?Colors.red[500],),
??????????),
??????????Container(
????????????height:?60,
????????????color:?Colors.greenAccent,
????????????padding:?const?EdgeInsets.only(right:?11,bottom:?0,left:?11),
????????????child:?Text('413242342342',),
??????????),
????????],
??????),
????);
?????var?color?=?Theme.of(context).primaryColor;
?????var?bottonSection?=?Container(
???????child:?Row(
?????????mainAxisAlignment:?MainAxisAlignment.spaceEvenly,
?????????children:?<Widget>[
???????????_buildButtonColumn(color,?Icons.call,?'CALL'),
???????????_buildButtonColumn(color,?Icons.near_me,?'ROUTE'),
???????????_buildButtonColumn(color,?Icons.share,?'SHARE'),
?????????],
???????),
?????);
?????var?textSection?=?Container(
???????padding:?const?EdgeInsets.all(32),
???????child:?Text(
?????????'Lake?Oeschinen?lies?at?the?foot?of?the?Blüemlisalp?in?the?Bernese?'
?????????'Alps.?Situated?1,578?meters?above?sea?level,?it?is?one?of?the?'
?????????????'larger?Alpine?Lakes.?A?gondola?ride?from?Kandersteg,?followed?by?a?'
?????????????'half-hour?walk?through?pastures?and?pine?forest,?leads?you?to?the?'
?????????????'lake,?which?warms?to?20?degrees?Celsius?in?the?summer.?Activities?'
?????????????'enjoyed?here?include?rowing,?and?riding?the?summer?toboggan?run.',
?????????softWrap:?true,
???????),
?????);
????return?MaterialApp(
??????home:?Scaffold(
????????appBar:?AppBar(
??????????title:?Text('layout?demo'),
????????),
????????body:?ListView(
??????????children:?<Widget>[
????????????Image.asset(
??????????????'assets/images/food05.jpeg',
??????????????width:?600,
??????????????height:?200,
??????????????fit:?BoxFit.cover,
????????????),
????????????titleSection,
????????????bottonSection,
????????????textSection,
??????????],
????????),
??????),
????);
??}
??Column?_buildButtonColumn(Color?color,IconData?icon,?String?label)?{
????return?Column(
//??????mainAxisSize:?MainAxisSize.min,
//??????mainAxisAlignment:?MainAxisAlignment.center,
??????children:?<Widget>[
????????Icon(icon,color:?color,),
????????Container(
??????????child:?Text(label,style:?TextStyle(
????????????fontSize:?12,
????????????fontWeight:?FontWeight.w400,
????????????color:?color
??????????),),
????????),
??????],
????);
??}
}
添加調(diào)試
void?main()?{
??debugPaintSizeEnabled=true;
??runApp(MyApp());
}
