64.会员中心_顶部头像UI布局

会员中心的样式

member.dart

清除原来的代码生成一个基本的结构

默认返回一个scaffold脚手架工具，body里面布局使用ListView，这样不会出现纵向的溢出

这样就是一个基本的结构

头部的布局

这里的背景颜色是一个图片。这里我们先不用图片，先使用亮粉色，找图片比较麻烦

头像从网上随便找一个图片当头像就可以了

http://blogimages.jspang.com/blogtouxiang1.jpg

效果预览

最终代码

1import 'package:flutter/material.dart';
2import 'package:flutter_screenutil/flutter_screenutil.dart';
3
4class MemberPage extends StatelessWidget {
5  @override
6  Widget build(BuildContext context) {
7    return Scaffold(
8      appBar: AppBar(
9        title: Text('会员中心'),
10      ),
11      body: ListView(
12        children: <Widget>[
13          _topHeader()
14        ],
15      ),
16    );
17  }
18
19  Widget _topHeader(){
20    return Container(
21      width: ScreenUtil().setWidth(750),
22      padding: EdgeInsets.all(20),
23      color: Colors.pinkAccent,//亮粉色
24      child: Column(
25        children: <Widget>[
26          Container(
27            margin: EdgeInsets.only(top: 30),
28            child: ClipOval(//圆形的头像
29              child: Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'),
30            ),
31          ),
32          //头像下面的文字，为了好看也是嵌套一个Container
33          Container(
34            margin: EdgeInsets.only(top: 10),
35            child: Text(
36              '技术胖',
37              style: TextStyle(
38                fontSize: ScreenUtil().setSp(36),
39                color: Colors.black54
40              )
41            ),
42          )
43        ],
44      ),
45    );
46  }
47}