今天又跟大家见面了，今天分享一个UI布局到学习吧，效果完美。

本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

本文学习一下Flutter的assets配置，里面有字体的运用，和图片的读取。比如IconData的学习。整体的架构很简单 ，直接看看效果吧。

main.dart代码

import 'package:flutter/material.dart';
import 'package:profile/main_menu.dart';
import 'package:profile/models.dart';
import 'package:profile/profile_colors.dart';
import 'package:profile/profile_icons.dart';
import 'package:profile/profile_header.dart';
import 'package:profile/quick_actions.dart';

void main() => runApp(new ProfileApp());


class ProfileApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Profile Challenge',
 home: new ProfileHomePage()
 );
 }
}

class ProfileHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final iconColor = new Color(0xFFCCCCCC);
 final navigationItems = <BottomNavigationBarItem>[
 new BottomNavigationBarItem(
 icon: new Icon(LineAwesomeIcons.home, color: iconColor),
 title: new Text("")),
 new BottomNavigationBarItem(
 icon: new Icon(LineAwesomeIcons.bookmark, color: iconColor,),
 title: new Text("")),
 new BottomNavigationBarItem(
 icon: new Icon(LineAwesomeIcons.thumbsUp, color: iconColor,),
 title: new Text("")),
 new BottomNavigationBarItem(
 icon: new Icon(
 LineAwesomeIcons.user, color: ProfileColors.primaryColor,),
 title: new Text(""))
 ];

 final profile = getProfile();

 return new Scaffold(
 body: new ListView(
 padding: const EdgeInsets.all(0.0),
 children: <Widget>[
 new ProfileHeader(profile),
 new QuickActions(),
 new MainMenu(),
 ],
 ),
 bottomNavigationBar: new BottomNavigationBar(
 currentIndex: 0,
 items: navigationItems,
 onTap: (index) {},
 fixedColor: ProfileColors.primaryColor,
 iconSize: 25.0,
 type: BottomNavigationBarType.fixed,
 ),
 );
 }

}

MainMenu代码如下

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';


class MainMenu extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
 return new Container(
 constraints: const BoxConstraints(maxHeight: 240.0),
 child: new ListView(
 padding: const EdgeInsets.only(left: 5.0),
 children: <Widget>[
 _buildListItem("Memories", Icons.camera, () {}),
 _buildListItem("Favourites", Icons.favorite, () {}),
 _buildListItem("Presents", Icons.card_giftcard, () {}),
 _buildListItem("Friends", Icons.people, () {}),
 _buildListItem("Achievement", FontAwesomeIcons.trophy, () {}),
 ],
 ),
 );
 }

 Widget _buildListItem(String title, IconData iconData, VoidCallback action) {
 final textStyle = new TextStyle(
 color: Colors.black54, fontSize: 18.0, fontWeight: FontWeight.w600);

 return new InkWell(
 onTap: action,
 child: new Padding(
 padding: const EdgeInsets.only(
 left: 10.0, right: 10.0, bottom: 5.0, top: 5.0),
 child: new Row(
 mainAxisAlignment: MainAxisAlignment.start,
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[
 new Container(
 width: 35.0,
 height: 35.0,
 margin: const EdgeInsets.only(right: 10.0),
 decoration: new BoxDecoration(
 color: Colors.purple,
 borderRadius: new BorderRadius.circular(5.0),
 ),
 alignment: Alignment.center,
 child: new Icon(iconData, color: Colors.white, size: 24.0),
 ),
 new Text(title, style: textStyle),
 new Expanded(child: new Container()),
 new IconButton(
 icon: new Icon(Icons.chevron_right, color: Colors.black26),
 onPressed: action)
 ],
 ),
 ),
 );
 }

}

总结

还有一些代码就不贴了，今天就到这儿吧。

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。