Как создать значок значка круга в Flutter?

Ответ 1

флаттер поставляется с FloatingActionButton

Образец :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'msc',
        home: new Scaffold(
            body: new Center(
              child: new FloatingActionButton(
                backgroundColor: Colors.redAccent,
                onPressed: () => {},
              ),
            )));
  }
}

Ответ 2

Я думаю, что RawMaterialButton лучше подходит.

new RawMaterialButton(
  onPressed: () {},
  child: new Icon(
     Icons.pause,
     color: Colors.blue,
     size: 35.0,
  ),
  shape: new CircleBorder(),
  elevation: 2.0,
  fillColor: Colors.white,
  padding: const EdgeInsets.all(15.0),
),

Ответ 3

Вы можете использовать InkWell для этого:

Прямоугольная область материала, который реагирует на прикосновение.

Ниже приведен пример использования InkWell. Обратите внимание: вам не нужен StatefulWidget для этого. Я использовал это, чтобы изменить состояние счета.

Пример:

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => new _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new InkWell(// this is the one you are looking for..........
        onTap: () => setState(() => _count++),
        child: new Container(
          //width: 50.0,
          //height: 50.0,
          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,// You can use like this way or like the below line
            //borderRadius: new BorderRadius.circular(30.0),
            color: Colors.green,
          ),
          child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),//............
      ),
      ),
    );
  }
}

Если вы хотите получить выгоду от splashColor, highlightColor, оберните виджет InkWell используя виджет Material с кругом типа материала. А затем уберите decoration в виджете " Container.

Результат:

Ответ 4

Вы можете попробовать это, это полностью настраиваемо.

ClipOval(
  child: Material(
    color: Colors.blue, // button color
    child: InkWell(
      splashColor: Colors.red, // inkwell color
      child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
      onTap: () {},
    ),
  ),
)

Выход:

Ответ 5

Вы можете легко сделать следующее:

FlatButton(
      onPressed: () {

       },
      child: new Icon(
        Icons.arrow_forward,
        color: Colors.white,
        size: 20.0,
      ),
      shape: new CircleBorder(),
      color: Colors.black12,
    )

Результат

Ответ 6

Вы также можете использовать RaisedButton с изображением внутри (например, для входа в социальную сеть), например так (sizebox с fittebox необходим для ограничения изображения с указанным размером):

FittedBox(
    fit: BoxFit.scaleDown,
    child: SizedBox(
        height: 60,
        width: 60,
        child: RaisedButton(
             child: Image.asset(
                 'assets/images/google_logo.png'),
                 shape: StadiumBorder(),
                 color: Colors.white,
                     onPressed: () {},
                 ),
             ),
         ),