Want to create a circle icon button in Flutter? Below example demonstrate how to use InkWell. Notice: you don’t need StatefulWidget to do that. I used it to change the state of the count.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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)), ),//............ ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
