Круглая кнопка с текстом и значком в трепете

Ответ 1

Вы можете просто использовать именованные конструкторы для создания различных типов кнопок с иконками. Например,

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

Но если у вас есть особые требования, вы всегда можете создать пользовательскую кнопку с разными макетами или просто обернуть виджет в GestureDetector.

Ответ 2

Вы можете добиться этого, используя 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),
        ),
      );
}

Это приведет к следующему:

Ответ 3

Используйте 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,),
      ],
    ),
  ),
),

Ответ 4

Снимок экрана:

@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
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Ответ 5

Flutter дает вам руководство по созданию макета. Вы можете увидеть примеры здесь https://flutter.io/tutorials/layout/

Ответ 6

Вы можете сделать что-то вроде

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))
                  ),