Dart 如何在复杂的屏幕中空间地给出图像或文本背景
嗨,朋友们,我需要开发这样一个屏幕 但我在下面看我尝试了扩展但不同的请帮助朋友我是新手我不知道如何实现所需的布局 下面是我的代码Dart 如何在复杂的屏幕中空间地给出图像或文本背景,dart,flutter,flutter-layout,Dart,Flutter,Flutter Layout,嗨,朋友们,我需要开发这样一个屏幕 但我在下面看我尝试了扩展但不同的请帮助朋友我是新手我不知道如何实现所需的布局 下面是我的代码 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'ColorsPage.dart'; void main() => runApp(new Login()); class Login extends StatefulWidget{
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'ColorsPage.dart';
void main() => runApp(new Login());
class Login extends StatefulWidget{
@override
State<StatefulWidget> createState() {
Login_State login_state() => Login_State();
return login_state();
}
}
class Login_State extends State<Login>{
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new Builder(builder: (BuildContext context){
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN IN',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: secondarycolor
),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: new Text('SIGN UP',style: new TextStyle(
color: Colors.white
),),
decoration: new BoxDecoration(
color: primarycolor
),
alignment: Alignment(0.0, -1.0),
)
],
);
}),
),
);
}
}
import'包装:flift/cupertino.dart';
进口“包装:颤振/材料.省道”;
导入“ColorsPage.dart”;
void main()=>runApp(新登录名());
类登录扩展StatefulWidget{
@凌驾
状态createState(){
Login_State Login_State()=>Login_State();
返回登录状态();
}
}
类登录\状态扩展状态{
@凌驾
小部件构建(构建上下文){
返回新材料PP(
家:新脚手架(
正文:新生成器(生成器:(BuildContext上下文){
返回新列(
mainAxisAlignment:mainAxisAlignment.space,
儿童:[
新容器(
子项:new Image.asset('assets/rural\u post\u logo.png'),
装饰:新盒子装饰(
颜色:颜色。白色
),
对齐:对齐(0.0,-1.0),
),
新容器(
子项:新文本('登录',样式:新文本样式(
颜色:颜色。白色
),),
装饰:新盒子装饰(
颜色:第二种颜色
),
对齐:对齐(0.0,-1.0),
),
新容器(
子项:新文本(“注册”),样式:新文本样式(
颜色:颜色。白色
),),
装饰:新盒子装饰(
颜色:原色
),
对齐:对齐(0.0,-1.0),
)
],
);
}),
),
);
}
}
容器上的列
小部件
覆盖其正常行为,使其尽可能大,现在它只包装您注意到的内容。您可以给容器
一个高度属性
,或者将其包装在填充中
:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(70.0),
child:
new Container(
child: new Image.asset('assets/rural_post_logo.png'),
decoration: new BoxDecoration(
color: Colors.white
),
alignment: Alignment(0.0, -1.0),
),
),
new Column(
children: <Widget>[
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN IN',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: secondarycolor),
alignment: Alignment(0.0, -1.0),
),
new Container(
child: Padding(
padding: const EdgeInsets.all(80.0),
child: new Text(
'SIGN UP',
style: new TextStyle(color: Colors.white),
),
),
decoration: new BoxDecoration(color: primarycolor),
alignment: Alignment(0.0, -1.0),
)
],
),
],
),
列(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
儿童:[
填充物(
填充:常数边集全部(70.0),
儿童:
新容器(
子项:new Image.asset('assets/rural\u post\u logo.png'),
装饰:新盒子装饰(
颜色:颜色。白色
),
对齐:对齐(0.0,-1.0),
),
),
新专栏(
儿童:[
新容器(
孩子:填充(
填充:常数边集全部(80.0),
儿童:新文本(
“登录”,
样式:新文本样式(颜色:Colors.white),
),
),
装饰:新盒子装饰(颜色:二次色),
对齐:对齐(0.0,-1.0),
),
新容器(
孩子:填充(
填充:常数边集全部(80.0),
儿童:新文本(
“注册”,
样式:新文本样式(颜色:Colors.white),
),
),
装饰:新盒子装饰(颜色:primarycolor),
对齐:对齐(0.0,-1.0),
)
],
),
],
),
使用flattericon
你能告诉我怎么做吗?@ayubbabaflatterlogo(尺寸:50.0),