[英]Round button with text and icon in flutter
如何為flutter
設置一個帶有文本和圖標的按鈕?
我想要一個看起來像圖標的button
,上面有一個可以放在屏幕底部的文本
例如,圖標如下: android-button-with-icon-and-text
您可以簡單地使用命名構造函數來創建不同類型的帶有圖標的按鈕。 例如
FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);
但是,如果您有特定要求,那么您始終可以創建具有不同布局的自定義按鈕,或者簡單地將小部件包裝在GestureDetector 中。
您可以通過使用包含Column
(用於在圖標下方顯示文本)或Row
(用於圖標旁邊的文本)的FlatButton
,然后將Icon
小部件和Text
小部件作為子項來實現這一點。
下面是一個例子:
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) =>
Scaffold(
appBar: AppBar(
title: Text("Hello world"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.orange,
padding: EdgeInsets.all(10.0),
child: Column( // Replace with a Row for horizontal icon + text
children: <Widget>[
Icon(Icons.add),
Text("Add")
],
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
這將產生以下內容:
截圖:
SizedBox.fromSize(
size: Size(56, 56), // button width and height
child: ClipOval(
child: Material(
color: Colors.orange, // button color
child: InkWell(
splashColor: Colors.green, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.call), // icon
Text("Call"), // text
],
),
),
),
),
)
在 Button 子項中使用 Column 或 Row,水平按鈕使用 Row,垂直使用 Column,並且不要忘記包含您需要的大小:
Container(
width: 120.0,
height: 30.0,
child: RaisedButton(
color: Color(0XFFFF0000),
child: Row(
children: <Widget>[
Text('Play this song', style: TextStyle(color: Colors.white),),
Icon(Icons.play_arrow, color: Colors.white,),
],
),
),
),
如果您需要這樣的按鈕:
您可以使用RaisedButton
並使用 child 屬性來執行此操作。 您需要添加一個行,在行內您可以添加一個Text
小部件和一個Icon
小部件來實現這一點。 如果你想使用 png 圖像,你可以使用類似的小部件來實現這一點。
RaisedButton(
onPressed: () {},
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(
SizeConfig.safeBlockHorizontal * 5,
0,
SizeConfig.safeBlockHorizontal * 5,
0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Continue',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
我通常這樣做的方法是在 Raised 按鈕中嵌入一行:
class Sendbutton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {},
color: Colors.black,
textColor: Colors.white,
child: Row(
children: <Widget>[
Text('Send'),
Icon(Icons.send)
],
),
);
}
}
你可以做類似的事情,
RaisedButton.icon( elevation: 4.0,
icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
color: Theme.of(context).primaryColor,
onPressed: getImage,
label: Text("Add Team Image",style: TextStyle(
color: Colors.white, fontSize: 16.0))
),
我希望這會有所幫助。 我正在使用 flutter 2.10.1
ElevatedButton.icon(onPressed: null, icon: null, label: null);
如何使用 ElevatedButton.icon
ElevatedButton.icon(
icon: const Icon(
Icons.add_circle,
color: Colors.white,
),
onPressed: onPressed,
label: Text(
"Schedule",
style: const TextStyle(
fontSize: 16,
color: Colors.white),
),
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 3, 133, 194),
fixedSize: const Size(208, 43),
),
)
您可以在此處閱讀文檔: https://api.flutter.dev/flutter/material/ElevatedButton/ElevatedButton.icon.html
恭喜之前的答案......但我意識到如果圖標在一行中(比如上圖所示的三個圖標),你需要玩弄列和行。
這是代碼
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton(
onPressed: () {},
child: Icon(
Icons.call,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.message,
)),
FlatButton(
onPressed: () {},
child: Icon(
Icons.block,
color: Colors.red,
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
' Call',
),
Text(
'Message',
),
Text(
'Block',
style: TextStyle(letterSpacing: 2.0, color: Colors.red),
),
],
),
],
),
FlatButton、RaisedButton 和 OutlineButton 小部件已分別替換為 TextButton、ElevatedButton 和 OutlinedButton。
只需將此代碼放在下面作為按鈕。 已接受的答案也在 2021 年 9 月更新。
TextButton.icon(
style: TextButton.styleFrom(
textStyle: TextStyle(color: Colors.blue),
backgroundColor: Colors.white,
shape:RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24.0),
),
),
onPressed: () => {},
icon: Icon(Icons.send_rounded,),
label: Text('Contact me',),
),
然后你可以用這個小部件樹來實現它:
RaisedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(
'Push it! '*10,
textAlign: TextAlign.center,
),),
Image.network(
'https://picsum.photos/250?image=9',
),
],
),
),
在最新版本的 Flutter 中,我認為您可以像這樣使用 Just IconButton Widget:
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(Icons.volume_up),
onPressed: () {},
),
Text('Volume')
],
);
}
希望這會有所幫助,從這個 文檔中了解更多信息。
顫振 2.4:
最好的推薦方法是使用ShapeDecoration
這是使用 Inkwell 的示例(模擬按鈕,但您可以改用按鈕並獲得相同的結果)。
InkWell(
onTap: (){},
child: Container(
width: 50,
height: 50,
decoration: ShapeDecoration(
shape: CircleBorder(), //here we set the circular figure
color: Colors.red
),
child: Center(
child: Icon(
Icons.email,
size: 30,
color: Colors.white,
)
),
)
)
這些是 ShapeDecoration 中的可能形狀:
RoundedRectangleBorder(),
BeveledRectangleBorder(),
ContinuousRectangleBorder(),
CircleBorder(),
結果鏈接示例: https : //images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png
TextButton(
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.blue)),
primary: Colors.black,
//backgroundColor: Colors.grey,
onSurface: Colors.grey,
minimumSize:
Size(MediaQuery.of(context).size.width - 20, 40)),
onPressed: () => null,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: new Text("b )",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 14,
)),
),
Image.network(
'https://blabala7710263543.jpg'),
],
)),
ElevatedButton.icon(
icon: const Icon(
Icons.add_circle,
color: Colors.green,
),
onPressed: onPressed,
label: Text(
"Button",
style: const TextStyle(
fontSize: 16,
color: Colors.green),
),
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 45, 186, 239),
fixedSize: const Size(210, 45),
),
)
從 flutter 3.3.10 開始,您可以使用 Container、Column 和 InkWell 實現此按鈕
喜歡:
InkWell(
onTap: () {/*DO SOMETHING*/},
child: Container(
height: 100,//PREF HEIGHT
width: 100, //PREF WIDTH
alignment: Alignment.center,
color: Colors.orange, //YOUR BUTTON COLOR
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [Icon(Icons.add, size:18 /*PREF ICON SIZE*/),SizedBox(height:25), Text('MY BUTTON')]))),
只需使用 Row 和 Column 組合即可獲得結果。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.