How to make round buttons in Flutter (2020)

July 29, 2020 Goodman Loading... Post a comment

An easy and good way to create a round button (not “rounded button” or “pill button”) in Flutter is to wrap a RaisedButton widget inside a square Container and using the BorderRadisu class.

Sample code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Removing the debug banner when running on simulators
        debugShowCheckedModeBanner: false,
        title: 'An Aweasome App',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Home'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                // just an empty SizedBox to add some spacing
                SizedBox(height: 30,),

                Container(
                    // set width equal to height to make a square
                    width: 200,
                    height: 200,
                    child: RaisedButton(
                      color: Colors.orange,
                      shape: RoundedRectangleBorder(
                          // set the value to a very big number like 100, 1000...
                          borderRadius: BorderRadius.circular(100)),
                      child: Text('I am a button'),
                      onPressed: () {},
                    ))
              ],
            ),
          ),
        ));
  }
}
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles

0
Would love your thoughts, please comment.x
()
x