Flutter Custom Buttons - How to Create Custom Buttons in Flutter?

In this post we will learn how to create Customized Buttons in Flutter. As we all knows that Flutter is Cross Plaform development framework. So this Custom Widget will works for both Android and IOS

You can also check Custom Button with Loading Indicator

Create New Project 

Add Below code in the dart file

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: CustomButton(),
    );
  }

}

class CustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar:AppBar(title: Text("Custom Button",),backgroundColor: Colors.pink,),body: Center(child: buildLoginButtonWidget(context)));
  }

  Widget buildLoginButtonWidget(context) {
    return Container(
        margin: EdgeInsets.only(top: 40, left: 16, right: 16),
        width: MediaQuery.of(context).size.width - 32,


        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            RawMaterialButton(
              fillColor: Colors.pink,
              splashColor: Colors.purple,
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const <Widget>[
                    Icon(
                      Icons.play_circle_outline,
                      color: Colors.white,
                      size: 32,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      "Kiss Me",
                      maxLines: 1,
                      style: TextStyle(color: Colors.white,fontSize: 20),
                    ),
                  ],
                ),
              ),

              shape: const UnderlineInputBorder(),
            ),
            RawMaterialButton(
              fillColor: Colors.green,
              splashColor: Colors.greenAccent,
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const <Widget>[
                    Icon(
                      Icons.face,
                      color: Colors.amber,
                      size: 32,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      "Kiss Me",
                      maxLines: 1,
                      style: TextStyle(color: Colors.white,fontSize: 20),
                    ),
                  ],
                ),
              ),

              shape: const StadiumBorder(),
            ),
            RawMaterialButton(
              fillColor: Colors.purpleAccent,
              splashColor: Colors.lightGreen,
              child: Padding(
                padding: EdgeInsets.all(10.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const <Widget>[
                    Icon(
                      Icons.face,
                      color: Colors.amber,
                      size: 32,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      "Kiss Me",
                      maxLines: 1,
                      style: TextStyle(color: Colors.white,fontSize: 20),
                    ),
                  ],
                ),
              ),

              shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10)
              ),
            ),
          ],
        ));
  }
}

 

Flutter Custom Buttons

 

Flutter Custom Buttons

Other Flutter Examples


2758 Views

Author: RRTutors