#1 Create Beautiful Rounded Buttons in Flutter (Flutter Series by Akshit Madan)

Akshit Madan
Aug 25, 2020

--

Hey there , do you want to create a beautiful rounded button in Flutter ? Then you are at the right place. So lets see first how our output is gonna be..

So, this is how are output will look like. You can keep the border radius as per your choice. Lets see the code now —

SizedBox(height: 50,child: RaisedButton(onPressed: () {signmein();},shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),color: Colors.blueAccent,child: Center(child: Text("Sign In",style: TextStyle(color: Colors.white),),),),),

As you can see , first I have created a SizedBox which helps in regulating the height and width of its child item , here that child is a Raised Button. Then I gave shape to my button as Rounded Rectangle border and it contains a property border radius which i provided to be 10. Try out 90 if you want completely circular buttons.

In the same way create that another button of sign in via google —

SizedBox(height: 10),SizedBox(height: 50,child: RaisedButton(onPressed: () {},shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),color: Colors.white,child: Center(child: Text("Sign In via Google",style: TextStyle(color: Colors.black87),),),),),

And here you completed a small part for your login page of your app .

If this article helped you , then I deserve a clap !!

--

--

Akshit Madan

Founder @Resumepal | Software Engineer | AI & LLMs | Flutter