Firstly lets create a default application using Flutter with below steps

Create a new Flutter project

  1. Start Visual Studio Code application
  2. Click View and select Command Palette
  3. Search for ‘flutter’, and select the Flutter: New Project from the given options
  4. Enter a project name of choice, make sure to use all small case letter or with underscore and then press Enter
  5. Specify a location to place the project, and press OK

After project is loaded, you can run the app using flutter run from terminal and make sure to open iOS simulator or Android Emulator before running. I am using iOS simulator for this demo

When project is loaded to simulator, it should present you with default app with a button that increments by 1 on App’s UI as below

Now lets start by adding ClickButton class by extending it with StatelessWidget.

  1. Lets return a Container
  2. RaiseButton as child
  3. Color: Amber
  4. Text: Click me to show Alert Dialog
  5. Lets leave onpress as empty method for now
  6. run the app

Now add our clickbutton to children property of scaffold widget in my home page state widget. Now run the app you should be able to see the button on the screen like below

Now lets add a method to onpress method of clickbutton along with current context as parameter as shown below

Now, lets create a Alert for our app

  1. create a method with name ShowAlertMethod with current context a parameter.
  2. Add a alert parameter with AlertDialog, Add tile and style with font as below
  3. Add some content and style as below
  4. Add actions for ok button. These time we will use Flatbutton with text ok and use Navigator and pop method to close dialog
  5. now add alert to show dialog as below

Now run the app and click on button to show Alert dialog as below

On clicking on “ok” button will close the dialog.

Happy code, here is the link to github for code

Advertisement