Flutter Beautiful Buttons
In this article, we will see how can we create beautiful buttons with Dart language on Flutter.
Container widget is the most used widget in Flutter. You can change every propertie of Container widget. I did a beautiful button with Container widget.
Container widget have a lot of properties. You can change shape, color, elevation, size and many other properties. I used “MediaQuery.of(context).size * [your choise]” for set size of this Container. You can get size of devices thanks to MediaQuery widget. You can go this link for more information.
You can change colors, radius or another properties with “decoration”. If you want to use decoration propertie, you should use “BoxDecoration” widget.
Colors of this button are yellow and green. It’s begin alignment is top left and end alignment is bottom right. We can set this properties with “gradient”propertie in decoration propertie. We should use “LinearGradient” widget for set begin, end alignment and colors. I choose two colors for this button but you can use more than two colors for styling this button.
Container widget wrapped with Center widget. You can see in the middle of the screen this button. We can do clickable Container with GestureDetector widget.
GestureDetector widget provides button clickability. The best known feature is “onTap” function of this widget. You can do anything in this function. For example, you can navigate from a screen to another screen with this beautiful widget.
You see “Send Money” and right arrow icon button. I used a “Row” widget. Row widget is child of our beautiful button. It has three children. Two Text widget and a simple Container widget with Icon.
Our first child of Row widget is Text widget. Text widget has nothing. Because i used “mainAxisAlignment: MainAxisAlignment.spaceAround” propertie and i wanted to position second Text widget a little bit close to center of button. But this is my choice.
Our second child of Row widget is Text widget again. It has a text this time. I changed a couple of propertie of this widget thanks to “style” propertie. Our third child is Icon widget. I choose an icon and styled a little bit. I wrote code right here. You can see the details of our beatiful button.
This button is a Text Button. It has an “onPressed” propertie. You can add something in this function. We can design this button thanks to “style” propertie. I used “primary, backgroundColor, onSurface, shadowColor” properties for colors of design. You can see white side around this button. I did it thanks to “side” propertie with BorderSide widget.
Many buttons has a little bit shadow. Shadow color can be change “shadowColor” propertie and elevation can be change “elevation” propertie. We can choose shape of Text Button. “shape” propertie provide this.
This button has a child. This child is a Text widget. We can write something in text button thanks to it.
We can use Elevated Button for beautiful button designs on Flutter. Elevated Button has many properties about styling.
onPressed: We can doing something thanks to this propertie. You can see code example below.
child: Almost all widgets have child propertie. I used Text widget in this propertie. You can use Icon, Column, Row and anything.
style: We can change a lot of things about Elevated Button. This propertie provide us. “ElevatedButton.styleFrom()” has a lot of propertie.
- textStyle: If we used Text widget in child propertie we can change style of this widget thanks to this textStyle.
- minimumSize: Sometimes we cannot set the button sizes exactly. So we change button sizes frequently. We also use this feature to change button sizes.
- primary, onPrimary, onSurface: We can change the colors of the button thanks to these features.
- shadowColor: One of the things that make the button look good is the shadow. With this feature, we can change shadow color and we can change elevation thanks to elevation feature.
- side: As you can see this button has a small side. We can change the color, size and style of the button thanks to BorderSide() widget.
- shape: Sometimes we want to change the corners of the button. To do this, we can use RoundedRectangleBorder, which belongs to the shape property.
For more information about Flutter, you can follow beautifulFlutter on Instagram.
