Я не могу найти ни одного примера, который показывает, как создать круг IconButton
, похожий на FloatingActionButton
. Кто-нибудь может подсказать, как/что нужно для создания пользовательской кнопки, например, FloatingActionButton
?
Как создать значок значка круга в 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: () {},
),
),
),