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(),
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仿京东商城项目 用户中心页面布局的更多相关文章
- 14 Flutter仿京东商城项目 头部搜索导航布局 修改主题 修正ScreenAdapter类
main.dart import 'package:flutter/material.dart'; import 'routes/router.dart'; void main() => run ...
- 36 Flutter仿京东商城项目 用户登录 退出登录 事件广播更新状态
Login.dart import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.da ...
- 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 38 Flutter仿京东商城项目 渲染结算页面商品数据
加群452892873 下载对应38课文件,运行方法,建好项目,直接替换lib目录 CartServices.dart import 'dart:convert'; import 'Storage.d ...
- 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 04Flutter仿京东商城项目 首页商品列表布局
Home.dart import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart ...
- 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...
- 16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- ThinkPHP3.2开发仿京东商城项目实战视频教程
ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...
随机推荐
- 用 Redis 实现延时任务
原文:https://cloud.tencent.com/developer/article/1358266 1.什么是延时任务 延时任务,顾名思义,就是延迟一段时间后才执行的任务.延时任务的使用还是 ...
- 1204 中间件以及cookie,session
目录 一 .cookie与session原理 1.cookie 操作 1.1 设置cookie set_cookie 1.2 获取cookie request.COOKIES.get('k1') 1. ...
- 安装Genymotion模拟器(第三方)
优势: 启动速度更快 注册账户,下载可用的系统镜像,就可以使用. 官方网站: https://www.genymotion.com/account/login/ 选择的版本是带VirtualB ...
- ASP.NET MVC 入门7、Hellper与数据的提交与绑定
View视图 我们可以手写HTML代码, 也可以采用基类提供的Helper类完成HTM代码. 示例: <%=Html.ActionLink("首页","index& ...
- Unity Platform Differernces
https://docs.unity3d.com/560/Documentation/Manual/SL-PlatformDifferences.html
- Django REST framework+Vue 打造生鲜电商项目(笔记十一)
(form: http://www.cnblogs.com/derek1184405959/p/8886796.html 有修改) 十四.social_django 集成第三方登录 1.申请应用 进入 ...
- 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- jq 字符串转数组
一般我们在添加关键词时 会添加几组关键词 上传时怎么取值呢 取值时用以下格式 就能取到值 var FTag = "" //AAA,BBB if (FTag1 != &qu ...
- mysql数据库中锁机制的详细介绍
悲观锁与乐观锁: 悲观锁:顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据库里边就用到了很多这 ...
- learning scala pattern matching 03
code: package com.aura.scala.day01 object patternMatching03 { //当不同类型对象需要调用不同方法时,仅匹配类型的模式非常有用. def g ...