How To Create Circular Button Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 02-11-2020

This method basically does the same thing to the button as a RoundedRectangleBorder with a circular radius of 20 but is much shorter. Obviously even less customizable than the above method.

How To Create Circular Button Using Flutter Android App

Circular Button
Complete Code For Circular Button In Flutter
main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo[800],
        title: Text("Circular Button"),
      ),
      body: Center(
          child: GestureDetector(
            onTap: () {},
            child: ClipOval(
              child: Container(
                color: Colors.indigo[800],
                height: 120.0,
                width: 120.0,
                child: Center(child: Text('Circular Button',
                  style: TextStyle(
                      color: Colors.white
                  ),
                )),
              ),
            ),
          )),
    );
  }
}

Related Post