flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下
stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高
appbar透明
AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
}
container设置背景
Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/icon_login_bg.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
背景图在appBar之下
return new Scaffold(
  body: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.blue.shade200,
      ),
      new AppBar(
        title: new Text("App bar"),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      new Positioned(
        top: 80.0,
        left: 0.0,
        bottom: 0.0,
        right: 0.0,
        //here the body
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: Container(
                color: Colors.grey,
              ),
            )
          ],
        ),
      ),
    ],
  ),
);
登陆页面
import 'dart:async';
import 'package:flutte_xms/util/func_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  static const defaultText = '点击获取验证码';
  Timer countDownTimer;
  String vefifyCountText = defaultText;
  TextEditingController _mobileController;
  TextEditingController _verifyCodeController;
  Focus mobileFocus;
  @override
  Widget build(BuildContext context) {
    double screenWidth = FuntionUtil.screenwidth(context);
    double screenHeight = FuntionUtil.screenHeight(context);
    return Stack(
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.blue,
            image: DecorationImage(
              image: AssetImage('assets/icon_login_bg.png'),
              fit: BoxFit.cover,
              repeat: ImageRepeat.noRepeat,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            iconTheme: IconThemeData(
              color: Colors.white,
            ),
          ),
          body: GestureDetector(
            onTap: () {
              FocusScope.of(context).unfocus();
            },
            child: Container(
              height: screenHeight,
              width: screenWidth,
              alignment: FractionalOffset(0.5, 0.7),
              child: Padding(
                padding: EdgeInsets.zero,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Stack(
                      alignment: FractionalOffset(0.5, 0.95),
                      children: <Widget>[
                        Container(
                          color: Colors.transparent,
                          padding: EdgeInsets.only(top: 15, bottom: 30),
                          child: Container(
                            margin: EdgeInsets.only(left: 20, right: 20),
                            // height: 200,
                            child: Card(
                              child: Column(
                                children: <Widget>[
                                  //请输入手机号
                                  Container(
                                    margin: EdgeInsets.only(
                                        top: 15, left: 12, right: 12),
                                    child: Row(
                                      children: <Widget>[
                                        Container(
                                          height: 54,
                                          width: 30,
                                          alignment: Alignment.center,
                                          padding: EdgeInsets.only(
                                              left: 0, right: 5),
                                          child: Image.asset(
                                              'assets/icon_login_verifycode.png'),
                                        ),
                                        Expanded(
                                          child: Container(
                                            margin: EdgeInsets.only(right: 14),
                                            height: 54,
                                            alignment: Alignment.center,
                                            child: Theme(
                                              data: Theme.of(context).copyWith(
                                                  splashColor:
                                                      Colors.transparent),
                                              child: TextField(
                                                controller: _mobileController,
                                                keyboardType:
                                                    TextInputType.number,
                                                textInputAction:
                                                    TextInputAction.next,
                                                cursorColor: Colors.orange,
                                                decoration: InputDecoration(
                                                  hintText: '请输入手机号',
                                                  border: InputBorder.none,
                                                ),
                                                inputFormatters: [
                                                  LengthLimitingTextInputFormatter(
                                                      11)
                                                ],
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(
                                            width: 2, color: Colors.orange),
                                      ),
                                    ),
                                  ),
                                  //请输入验证码
                                  Padding(
                                    padding: EdgeInsets.only(
                                        top: 15,
                                        bottom: 80,
                                        left: 12,
                                        right: 12),
                                    child: Container(
                                      child: Row(
                                        children: <Widget>[
                                          Container(
                                            height: 54,
                                            width: 30,
                                            alignment: Alignment.center,
                                            padding: EdgeInsets.only(
                                                left: 0, right: 5),
                                            child: Image.asset(
                                                'assets/icon_login_verifycode.png'),
                                          ),
                                          Expanded(
                                            child: Container(
                                              margin:
                                                  EdgeInsets.only(right: 14),
                                              height: 54,
                                              alignment: Alignment.center,
                                              child: Theme(
                                                data: Theme.of(context)
                                                    .copyWith(
                                                        splashColor:
                                                            Colors.transparent),
                                                child: TextField(
                                                  controller:
                                                      _verifyCodeController,
                                                  keyboardType:
                                                      TextInputType.number,
                                                  textInputAction:
                                                      TextInputAction.done,
                                                  cursorColor: Colors.orange,
                                                  decoration: InputDecoration(
                                                    hintText: '请输入验证码',
                                                    border: InputBorder.none,
                                                  ),
                                                  inputFormatters: [
                                                    LengthLimitingTextInputFormatter(
                                                        11)
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ),
                                          FlatButton(
                                            splashColor: Colors.transparent,
                                            highlightColor: Colors.transparent,
                                            // disabledColor: Colors.grey,
                                            disabledTextColor: Colors.grey[300],
                                            child: Text(vefifyCountText),
                                            onPressed:
                                                vefifyCountText != defaultText
                                                    ? null
                                                    : () {
                                                        //开启倒计时
                                                        _startTime();
                                                      },
                                          )
                                        ],
                                      ),
                                      decoration: BoxDecoration(
                                        border: Border(
                                          bottom: BorderSide(
                                              color: Colors.orange, width: 2),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          child: FuntionUtil.button(context, '登陆'),
                          onTap: () {
                            FocusScope.of(context).unfocus();
                          },
                        ),
                      ],
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 10),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Image.asset('assets/icon_login_agreed.png'),
                          SizedBox(
                            width: 5,
                          ),
                          Text('用户同意协议和隐私策略'),
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 20),
                      child: Text('本产品不对未成年人开放'),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
//开启定时器
  void _startTime() {
    //置空
    _cancelTime();
    countDownTimer = Timer.periodic(Duration(seconds: 1), (t) {
      int second = 60 - t.tick;
      setState(() {
        //60-t.tick代表剩余秒数,如果大于0,设置text为剩余秒数
        if (second > 0) {
          vefifyCountText = '$second秒后重新获取';
        } else {
          vefifyCountText = '点击获取验证码';
          _cancelTime();
        }
      });
    });
  }
  //取消定时器
  void _cancelTime() {
    countDownTimer?.cancel();
    countDownTimer = null;
  }
  @override
  void dispose() {
    _cancelTime();
    super.dispose();
  }
}
												
											flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下的更多相关文章
- WebView设置透明和设置背景图片的方法
		
http://blog.csdn.net/Vincent20111024/article/details/8478219 1. WebView若要设置背景图,直接设置web .setBackgroun ...
 - VC 对话框设置背景颜色和图片
		
改变背景颜色,有两种方法: 1.在app的初始化函数中调用:void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORRE ...
 - 解决 UIView 设置背景为UIImage图片变型问题[XXX setBackgroundColor:[UIColor colorWithPatternImage:XXX]];
		
[self.drawingViewsetBackgroundColor:[UIColorcolorWithPatternImage:[selfthumbnailWithImageWithoutScal ...
 - android  设置背景为空(透明)
		
在给控件设置背景时像ps那样的背景透明 在3.0以下可以使用 imageView.setBackgroundResource(android.R.id.empty); 但是这个方法在3.0以上会出现 ...
 - android设置背景图片透明
		
设置Activiyt为透明可以在Activity中引用系统透明主题android:theme="@android:style/Theme.Translucent" 设置背景图片透明 ...
 - 解决css设置背景透明,文字不透明
		
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
 - Activity设置背景透明之开发坑
		
Activity设置背景透明的常规方法 方法一.在Manifest.xml中,直接在需要设置的Activity中添加主题样式: Android:theme="@android:style/T ...
 - Sublime如何设置背景透明
		
Sublime如何设置背景透明 下载sublime 透明背景插件 我用的是git下载插件: git clone https://github.com/vhanla/SublimeTextTrans.g ...
 - ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法
		
IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...
 
随机推荐
- 从FBV到CBV一(开始)
			
span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror ...
 - SSD源码解读——网络测试
			
之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...
 - time:时间就是生命
			
golang中的time包是用来处理时间的. 1.时间的基本属性 package main import ( "fmt" "strings" "tim ...
 - 标准C语言(13)
			
函数指针可以作为形式参数使用,会作为实际参数使用的函数叫回调函数 /* * 回调函数演示 * */ #include <stdio.h> void print_cb(int *p_num) ...
 - CTF基本常识
			
参照百度百科: https://baike.baidu.com/item/Pwn/5321286?fr=aladdin ”Pwn”是一个黑客语法的俚语词 [1] ,是指攻破设备或者系统 [2] . ...
 - UVA - 12538 Version Controlled IDE (可持久化treap)
			
紫薯例题 #include<bits/stdc++.h> using namespace std; typedef long long ll; ,inf=0x3f3f3f3f; ],ch[ ...
 - 【每日一包0003】kind-of
			
github地址:https://github.com/ABCDdouyae... kind-of 判断数据类型用法:kind-of(date)返回:string 数据类型 January undef ...
 - JPA的常用Annotation
			
http://www.blogjava.net/zJun/archive/2007/01/24/95747.html @transient 忽略该方法 一. @Entity:通过@Entity注解将一 ...
 - 使用SQL批量插入数据到数据库  以及一些SQL函数的语法
			
批量插入100条记录 set nocount on declare @i int=1; while @i<=100 begin Insert into Client(id,ClientCode, ...
 - 【Winform-ComboBox】实现ComboBox下拉框与数据库的绑定
			
实现效果如下: 1.设计窗体 下拉框的名称cmbName 2.连接数据库 DBHelper类代码: class DBHelper { /// <summary> /// 创建静态连接字符串 ...