In Flutter Everything is a widget. Widgets are basically user interface components used to create the user interface of the application. In Flutter, the application is itself a widget. Some of the Widgets are discussed in the earlier part of the Flutter series like Text Widget, Buttons Widget, Image Widget, Row & Column Widget, Form & TextField Widget, Stateless & Stateful Widget, and ListView & GridView Widget.

Other Useful Widgets in Flutter

There are also some of the useful widgets beside these widgets mentioned in previous parts of the Flutter series. They are:

Stack Widget

In Flutter Stack Widget is used to overlap the widgets one above another like a card in a box. Put below flutter code inside the body to view how Stack widget works on flutter.

Stack( //Stack Widget in Flutter
  alignment: Alignment.center,
  children: [
    Card(color: Colors.yellow, child: Padding(padding: const EdgeInsets.all(200.0))),
    Card(color: Colors.red, child: Padding(padding: const EdgeInsets.all(100.0))),
    Card(color: Colors.green, child: Padding(padding: const EdgeInsets.all(50.0))),
    Card(color: Colors.black, child: Padding(padding: const EdgeInsets.all(10.0))),
  ],
),

Checkbox Widget in Flutter

Checkbox Widget is used to make an input checkbox where a box can be either checked or unchecked. The checkbox is generally used to pass the boolean value which is either true or false.

bool cbool= true; //Put this line above "Widget build(BuildContext context)" method

Checkbox( //Checkbox Wiget
    value: cbool,
    onChanged: (bool cb){
      setState(() { //Should use Stateful widget to change state
        cbool = cb; //States changed when user click on checkbox
      });
    }
),

Radio button Widget in Flutter

Radio Widget is used to create radio buttons to select one option from multiple choices of options. For example, choosing Male or Female.

int rvalue= 1; //Put this line above "Widget build(BuildContext context)" method

Radio(
  value: 1,
  groupValue: rvalue,
  onChanged: (int value){
    setState(() {
      rvalue = value;
    });
  },
),
Radio(
  value: 2,
  groupValue: rvalue,
  onChanged: (int value){
    setState(() {
      rvalue = value;
    });
  },
),

Slider Widget

In Flutter Slider Widget is used to make a sliding bar which changes the value as we slide it. The best example of a slider widget is the Volume button where we slide the volume button and the sound increases or decreases.

double sval= 5.0; //Put this line above "Widget build(BuildContext context)" method

Slider(value: sval, min: 1.0, max: 10.0, onChanged: (double dval){
  setState(() {
    sval = dval;
    print(sval); // You can also print the value to show the value in Console
  });
}),

Switch Widget

Switch Widget is used to create a boolean switch which shows the value either true or false. If the value is true switch turns on and if it is false it turns off.

bool swval= false; //Put this line above "Widget build(BuildContext context)" method

Switch(
  value: swval,
  onChanged: (bool sc){
    setState(() {
      swval= sc;
    });
  },
),

 Output of the above Widgets

All Flutter Widgets
All Flutter Widgets

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, widgets in flutter, stack widget, checkbox widget, radio widget, slider widget, switch widget


3 Comments

  • Comment

    jordan 6

    2020-08-09 00:39:25

    Spot on with this write-up, I truly think this web site wants way more consideration. I抣l in all probability be once more to learn much more, thanks for that info.

    Reply

  • Comment

    yeezy boost 500

    2020-08-11 01:17:13

    I and my guys happened to be following the great secrets and techniques found on your web site and so at once I got a horrible suspicion I had not expressed respect to the web site owner for those secrets. All of the ladies came totally stimulated to see them and have in effect seriously been making the most of these things. Many thanks for getting quite considerate and then for having variety of excellent subject areas millions of individuals are really needing to learn about. Our own honest regret for not saying thanks to you sooner.

    Reply

  • Comment

    off white nike

    2020-08-13 06:30:27

    I actually wanted to develop a brief message to express gratitude to you for those marvelous facts you are giving on this site. My incredibly long internet investigation has finally been honored with good facts and techniques to write about with my close friends. I would assume that many of us website visitors are unequivocally endowed to be in a magnificent site with so many marvellous individuals with very beneficial guidelines. I feel quite privileged to have come across your web pages and look forward to some more awesome moments reading here. Thanks again for everything.

    Reply

Leave a comment