In this tutorial we will discuss about how we can create a leaf type rounded border menu in flutter.
To create this design, we should know how we can create rounded button in flutter. To achieve this we can use Container or in latest flutter we can use RawMaterialButton. In this tutorial we will use RawMaterialButton widget to create this menu.
RawMaterialButton(
)
In RawMaterialButton we have a property named shape which is used to define the shape of button you want to create. Elevation property can be used to provide the size of elevation. You can also define the color of button using fillColor. In this example we are going to use all three of them. First we will start with fillColor.
RawMaterialButton(
fillColor: Colors.yellow
)
Now we will add the elevation to the button.
RawMaterialButton(
fillColor: Colors.yellow,
elevation: 1.0,
)
After that, we will change the shape of button. To achieve this we will change the shape to RoundedRectangleBorder
RawMaterialButton(
fillColor: Colors.yellow,
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
10
),
side: BorderSide(
width: 1,
color: AppColor.themeColorYellowDark
)
),)
It time to change the border radius as per our requirement.
RawMaterialButton(
fillColor: Colors.yellow,
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(10),
),
side: BorderSide(
width: 1,
color: AppColor.themeColorYellowDark
)
),)
After creating the leaf, it’s time to add some button text and icon as shown in the image. We are going to use multiple widget to create our menu button.
RawMaterialButton(
fillColor: Colors.yellow,
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(10),
),
side: BorderSide(
width: 1,
color: AppColor.themeColorYellowDark
)
),child: Center(
child: Padding(
// padding: const EdgeInsets.fromLTRB(10, 25,10,15),
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0, 0,0,10),
child: Text(
‘Follow’,
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w800,
),
),
),
Container( alignment: Alignment.topLeft,
child:Text(
‘Enquiry’,
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
Container(
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(1),
borderRadius: BorderRadius.all(Radius.circular(0.0)),
),
padding: EdgeInsets.fromLTRB(10,6,10,6),
child: Icon(Icons.arrow_forward, size:20.0, color: Colors.red),
)
],
),
),
),
)
This is all we need for our menu. For more such tutorials visit Upbringer Flutter Category page.