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(),
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/user_bg.jpg'),
fit: BoxFit.cover)),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(, , , ),
child: ClipOval(
child: Image.asset(
'images/user.png',
fit: BoxFit.cover,
width: ScreenAdapter.width(),
height: ScreenAdapter.width(),
),
),
),
// Expanded(
// flex: 1,
// child: Text('登录/注册',style: TextStyle(
// color: Colors.white
// )),
// )
Expanded(
flex: ,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("用户名:123456789",
style: TextStyle(
color: Colors.white,
fontSize: ScreenAdapter.size())),
Text("普通会员",
style: TextStyle(
color: Colors.white,
fontSize: ScreenAdapter.size()))
],
),
)
],
),
),
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/.0x/user_bg.jpg
- images/.0x/user_bg.jpg
- images/user.png
- images/.0x/user.png
- images/.0x/user.png

32Flutter仿京东商城项目 用户中心页面布局的更多相关文章

  1. 14 Flutter仿京东商城项目 头部搜索导航布局 修改主题 修正ScreenAdapter类

    main.dart import 'package:flutter/material.dart'; import 'routes/router.dart'; void main() => run ...

  2. 36 Flutter仿京东商城项目 用户登录 退出登录 事件广播更新状态

    Login.dart import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.da ...

  3. 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  4. 38 Flutter仿京东商城项目 渲染结算页面商品数据

    加群452892873 下载对应38课文件,运行方法,建好项目,直接替换lib目录 CartServices.dart import 'dart:convert'; import 'Storage.d ...

  5. 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  6. 04Flutter仿京东商城项目 首页商品列表布局

    Home.dart import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart ...

  7. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  8. 16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  9. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

随机推荐

  1. OAuth2在微服务架构中的应用

    首先是为什么要在微服务场景使用OAuth2,这是因为使用了OAuth2后,就能向第三方系统提供授权. 其次是如何使用,见下图: 在微服务架构中使用OAuth2,有几个问题需要我们思考: 1. toke ...

  2. Vim使用技巧(0) -- 博主的vim配置

    vim ~/.vimrc "插入模式时 光标的上下左右移动 inoremap <C-l> <Right> inoremap <C-h> <Left& ...

  3. Vim使用技巧(5) -- 宏的录制与使用

    想象一个场景,我们怎么快速把下面的所有链接都加上双引号?可能你手速快,可以很快的加完,但是如果链接有上万个呢?你如何在十秒以内加完? 这时候就需要用到“宏”(其实除了宏vim还有其它方法加上双引号,这 ...

  4. VGridControl 使用技巧

    1. 让列的宽度自动填充 如果VGridControl的LayoutStyle属性为BandsView或SingleRecordView,那么把VGridControl的OptionsView.Aut ...

  5. JDK源码那些事儿之PriorityBlockingQueue

    今天继续说一说阻塞队列的实现,今天的主角就是优先级阻塞队列PriorityBlockingQueue,从命名上看觉得应该是有序的,毕竟是优先级队列,那么实际上是什么情况,我们一起看下其内部实现,提前说 ...

  6. JavaScript 廖2

    HTML表单的输入控件主要有以下几种: 文本框,对应的<input type="text">,用于输入文本: 口令框,对应的<input type="p ...

  7. WebStorm 简单搭建NodeJs服务

    开始使用 WebStorm 搭建( WebStorm 请自行安装...... ) 在 项目 根目录 新建个 app.js 开始 编写 app,js // 引入 HTTP 模块 const http = ...

  8. node 异步回调 —迭代记录

    1.0  开始时node采用了基础的js回调形势 const fs = require('fs'); fs.readFile('./package.json',(err,data) => { i ...

  9. OFDM为什么把高频子载波作为保护频带

    实际中发射机接收机的低通滤波器并不是理想低通滤波器,在[-W/2,W/2]之外的一个小范围(对应使用旁边的频带的用户的高频)之内也会有一些不可忽略的能量:并且,实际低通滤波器在高频子载波上的幅度也会比 ...

  10. Laravel 中使用 Repository 模式

    在本文中,我会向你展示如何在 Laravel 中从头开始实现 repository 设计模式.我将使用 Laravel 5.8.3 版,但 Laravel 版本不是最重要的.在开始写代码之前,你需要了 ...