как получить кнопку с текстом и значком для flutter
?
Я хотел иметь button
, который выглядит как иконка с текстом, который можно поместить внизу экрана
Например, значок выглядит так: android-button-with-icon-and-text
как получить кнопку с текстом и значком для 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.
Вы можете добиться этого, используя FlatButton
, который содержит Column
(для отображения текста под значком) или Row
(для текста рядом с значком), а затем с помощью виджета 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),
),
);
}
Это приведет к следующему:
Используйте Column или Row в дочернем элементе Button, Строка для горизонтальной кнопки, Столбец для вертикали и не забывайте содержать его с требуемым размером:
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,),
],
),
),
),
Снимок экрана:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Rounded button")),
body: Center(
child: 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
],
),
),
),
),
),
),
);
}
Flutter дает вам руководство по созданию макета. Вы можете увидеть примеры здесь https://flutter.io/tutorials/layout/
Вы можете сделать что-то вроде
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))
),