32Flutter仿京东商城项目 用户中心页面布局

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';

class UserPage extends StatefulWidget {
  UserPage({Key key}) : super(key: key);

  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户中心"),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: ScreenAdapter.height(220),
            width: double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('images/user_bg.jpg'),
                    fit: BoxFit.cover)),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: ClipOval(
                    child: Image.asset(
                      'images/user.png',
                      fit: BoxFit.cover,
                      width: ScreenAdapter.width(100),
                      height: ScreenAdapter.width(100),
                    ),
                  ),
                ),
                // Expanded(
                //   flex: 1,
                //   child: Text('登录/注册',style: TextStyle(
                //     color: Colors.white
                //   )),
                // )
                Expanded(
                  flex: 1,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text("用户名:123456789",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: ScreenAdapter.size(32))),
                      Text("普通会员",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: ScreenAdapter.size(32)))
                    ],
                  ),
                )
              ],
            ),
          ),
          ListTile(
              leading: Icon(Icons.home, color: Colors.red), title: Text('首页')),
          Divider(),
          ListTile(leading: Icon(Icons.home), title: Text('首页')),
          ListTile(leading: Icon(Icons.home), title: Text('首页')),
          ListTile(leading: Icon(Icons.home), title: Text('首页'))
        ],
      ),
    );
  }
}

pubspec.yaml

  assets:
   - images/user_bg.jpg
   - images/2.0x/user_bg.jpg
   - images/3.0x/user_bg.jpg
   - images/user.png
   - images/2.0x/user.png
   - images/3.0x/user.png