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:
/*1*/
Expanded(child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:
/*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:
_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:
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:
Icon(icon,color: color,),
Container(
child: Text(label,style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: color
),),
),
],
);
}
}
添加调试
void main() {
debugPaintSizeEnabled=true;
runApp(MyApp());
}