Flutter 如何在Flatter中对齐凸起按钮中的图标左侧和文本中间? 我有一个图标和一个按钮,其中两个都在中间对齐,我希望图标在左边,按钮的文本在中间。有人能调查一下,帮我做一下吗
这是我的密码:Flutter 如何在Flatter中对齐凸起按钮中的图标左侧和文本中间? 我有一个图标和一个按钮,其中两个都在中间对齐,我希望图标在左边,按钮的文本在中间。有人能调查一下,帮我做一下吗,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,这是我的密码: Widget _signInButton() { return ButtonTheme( height: 30, minWidth: 250, child: RaisedButton( color: Colors.white, splashColor: Colors.grey, onPressed: () { signInWithGoogle().whenComplete(() { Navigator.of(
Widget _signInButton() {
return ButtonTheme(
height: 30,
minWidth: 250,
child: RaisedButton(
color: Colors.white,
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
// borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image(image: AssetImage("Assets/google_logo.png"), height: 35.0),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 15,
color: Colors.black87,
Widget\u登录按钮(){
返回按钮(
身高:30,
最小宽度:250,
孩子:升起按钮(
颜色:颜色,白色,
颜色:颜色。灰色,
已按下:(){
使用Google()登录。当完成(){
导航器.of(上下文).push(
材料路线(
生成器:(上下文){
返回FirstScreen();
},
),
);
});
},
形状:RoundedRectangleBorder(borderRadius:borderRadius.circular(40)),
Highlight标高:0,
//borderSide:borderSide(颜色:Colors.grey),
孩子:填充(
填充:从LTRB(0,10,0,10)开始的常数边集,
孩子:排(
mainAxisSize:mainAxisSize.min,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
图像(图像:AssetImage(“Assets/google_logo.png”),高度:35.0),
扩大(
弹性:1,
孩子:填充(
填充:仅限常量边集(左:10),
子:文本(
“使用谷歌登录”,
样式:TextStyle(
尺寸:15,
颜色:颜色。黑色87,
您可以复制粘贴运行下面的完整代码您可以对图像使用
Expanded flex 1
,对文本使用Expanded flex 2
代码片段
Expanded(
flex: 1,
child: Image(
image: AssetImage("Assets/google_logo.png"),
height: 35.0),
),
Expanded(
flex: 2,
child: Padding(
工作演示
完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_signInButton(),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Widget _signInButton() {
return ButtonTheme(
height: 30,
minWidth: 250,
child: RaisedButton(
color: Colors.white,
splashColor: Colors.grey,
onPressed: () {
/*signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});*/
},
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
// borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Image(
image: AssetImage("Assets/google_logo.png"),
height: 35.0),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text('Sign in with Google',
style: TextStyle(
fontSize: 15, color: Colors.black87))))
]))));
}
导入“包装:颤振/材料.省道”;
void main()=>runApp(MyApp());
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
主页:MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
int _计数器=0;
void _incrementCounter(){
设置状态(){
_计数器++;
});
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:中(
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
_signInButton(),
正文(
“您已经按了这么多次按钮:”,
),
正文(
“$”计数器“,
样式:Theme.of(context).textTheme.display1,
),
],
),
),
浮动操作按钮:浮动操作按钮(
按下时:\ u递增计数器,
工具提示:“增量”,
子:图标(Icons.add),
),
);
}
}
小部件_登录按钮(){
返回按钮(
身高:30,
最小宽度:250,
孩子:升起按钮(
颜色:颜色,白色,
颜色:颜色。灰色,
已按下:(){
/*使用Google()登录。当完成(){
导航器.of(上下文).push(
材料路线(
生成器:(上下文){
返回FirstScreen();
},
),
);
});*/
},
形状:
RoundedRectangleBorder(borderRadius:borderRadius.circular(40)),
Highlight标高:0,
//borderSide:borderSide(颜色:Colors.grey),
孩子:填充(
填充:从LTRB(0,10,0,10)开始的常数边集,
孩子:排(
mainAxisSize:mainAxisSize.min,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
扩大(
弹性:1,
孩子:图像(
图片:AssetImage(“Assets/google_logo.png”),
身高:35.0),,
),
扩大(
弹性:2,
孩子:填充(
填充:仅限常量边集(左:10),
child:Text('使用谷歌登录',
样式:TextStyle(
字体大小:15,颜色:Colors.black87)
]))));
}
尝试移除柔性
小部件包装图像。当我移除柔性小部件时,按钮iss完全覆盖两侧,我无法减小宽度,请检查我所做的