在Flutter学习网站照着写了一个页面,效果如下:
布局分解学习网站已经写的很清楚了 这里不再重复!主要贴出完整代码 给后来者少走弯路!
网站代码并不完整,给出的main.dart不能查看。
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
"Flutter",
style: new TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold),
),
),
new Text(
"java",
style: new TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold),
)
],
),
),
new Icon(
Icons.star,
color: Colors.red[500],
),
new Text("41",
style: new TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w400,
))
],
),
);
Column BuildBottomColumn(IconData icon, String lable) {
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(
icon,
color: color,
),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
lable,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
),
)
],
);
}
Widget buttonWidget = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
BuildBottomColumn(Icons.call, "CALL"),
BuildBottomColumn(Icons.near_me, "ROUTE"),
BuildBottomColumn(Icons.share, "SHARE")
],
),
);
Widget textSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new 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, //true自动换行
style: new TextStyle(fontSize: 14.0, fontWeight: FontWeight.w300,color: Colors.black),
),
);
return new MaterialApp(
title: "Flutter Demo",
theme: new ThemeData(primarySwatch: Colors.blue),
home: new Scaffold(
body:new ListView(
children: <Widget>[
new Image.asset(
"images/lake.jpg",
height: 240.0,
fit: BoxFit.cover,
),
titleSection,
buttonWidget,
textSection
],
),
)
);
}
}
void main() => runApp(MyApp());