How to use raised button flutter

How to use raised button flutter

Let’s start our developing process, I hope you have read the my blog post “In Fluter Everything is widget“, if you yet not then please Click Here to Learn Flutter

import ‘package:flutter/material.dart’;

void main() {



Let’s understand line by line of code

Import the material.dart.

main function(), automatically executed when apps start executing.RunApp()tells flutter draw something on the screen. So, for that it uses “MyNewApp()” class.

Line 7 and 8:- We have inherited the stateless widget base class. You are allowed to inherit one class at one time. It already contains the build method. So if you want to override then please specify @override. But it is not compulsory to specify @override.It is just decorator provided by dart.
In this app the MyNewApp will work as (top level root)

Line 9:- Build() returns a so-called “widget tree” which tells Flutter what to draw onto the screen.

Line 10 and 11:- Here MaterialApp contains property like home.Which again point to Scaffold widget.

Line 12 to 15:- Scaffold contains property like “appBar” in line 12 and “body” in line 16. body is used to specify its main user interface and appBar is used to specify its header user interface. Here again appBar property point to AppBar widget. And AppBar widget contains property like title and backgroundColor.

Line 16 to 18:- Body property point to Center widget, which contains child property. Again this child property point to Text widget.

Scaffold, It’s job of creating a base page for our app.It provides a basic design,structure,color scheme. Here we have discuss about appBar,.body.

So I hope now you understand why I have told you to read the post.In Fluter Everything is widget

Above in line 16 we have used the CENTER Widget, so if we want to add new things then it won’t allow us so instead of Center let’s use column widget. It contains children property and using it we can place the multiple controls.

Line 16:- Here I am using column widget, with children as it property in which I am trying to display Text message with style.Column widget, works as a invisible widget. For example in our app we have button, textbok,images etc. All of them works as visible widget, in which user can perform such operation. But to manage all the visible controller we required Layout,Row,Column etc. Which helps us to manage all our controller(Like button). In next upcoming blog post I will explain to you Row widget, but in general Row widget, is used when we want to display items next to each other instead of above each other.

If you want to add button in your code then in flutter we have RaisedButton widget. It has Child and onPressed property. Simply write the code and your are good to.

In the begining when we learn flutter, There are two way to write the code for function in flutter.

1) Create function with proper name and call it

2) Create Anonymous function, which will never use though out the flutter project. Use that function only at once.

Which way you want to go that is totally depends on you. Here in the down below First I have discussed the Anonymous way and next using the name call it.

In the button click we used the “onPressed()”, which actually takes FUNCTION.

Is there any other way to write the code for function in Flutter?

Yes, you can write the code inside the class as shown in below.

Move to you raised button code now it is time to call the function. The Raised button code as shown down below executed at the time of, when flutter tries to build that button. But here we want to execute our function when user click on the button.

So instead of calling the function shown above we need to pass a pointer at “yesOption()” to OnPressed.

onPressed: yesOption

Here we are passing name of our function, informing him to execute at the time when user click on the button, we are not assigning the result of the function.

what is difference between text and print in flutter?

Print:-It is used when we want to display the something on the console.

Text:- It is widget. So if you want to display something on the screen you used TEXT widget. It is a short of LABEL.

Leave a Comment