Scribd
Upload
4 views4 pages

Flutter Widget Demo

The document provides a demonstration of various Flutter widgets, including Text, Icon, ElevatedButton, TextField, Checkbox, Switch, Slider, Row, Column, ListView, GestureDetector, SnackBar, and AlertDialog. Each widget is accompanied by a brief description and example code illustrating its functionality. This serves as a quick reference for developers looking to implement these widgets in their Flutter applications.

Uploaded by

kashikaasivakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

Flutter Widget Demo

The document provides a demonstration of various Flutter widgets, including Text, Icon, ElevatedButton, TextField, Checkbox, Switch, Slider, Row, Column, ListView, GestureDetector, SnackBar, and AlertDialog. Each widget is accompanied by a brief description and example code illustrating its functionality. This serves as a quick reference for developers looking to implement these widgets in their Flutter applications.

Uploaded by

kashikaasivakumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Flutter Widget Demo with Code

Explanation
Text Widget
Text("This is a simple text widget", style: TextStyle(fontSize: 18))

- Displays a line of styled text.

Icon Widget
Icon(Icons.star, size: 40, color: Colors.amber)

- Displays a Material icon with color and size.

ElevatedButton Widget
ElevatedButton(
onPressed: () {},
child: Text("Click Me"),
)

- A button with elevation and click behavior.

TextField Widget
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: "Enter some text",
),
)

- Input field for user text.


Checkbox Widget
Checkbox(
value: isChecked,
onChanged: (val) {
setState(() {
isChecked = val!;
});
},
)

- Toggles between true/false.

Switch Widget
Switch(
value: switchValue,
onChanged: (val) {
setState(() {
switchValue = val;
});
},
)

- A toggle switch for on/off.

Slider Widget
Slider(
value: sliderValue,
min: 0,
max: 100,
divisions: 10,
label: sliderValue.toInt().toString(),
onChanged: (value) {
setState(() {
sliderValue = value;
});
},
)
- A range slider with current value.

Row Widget
Row(
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
],
)

- Lays out widgets horizontally.

Column Widget
Column(
children: [
Text("Item 1"),
Text("Item 2"),
],
)

- Lays out widgets vertically.

ListView Widget
ListView.builder(
itemCount: 5,
itemBuilder: (context, index) => ListTile(
title: Text("List item \${index + 1}"),
),
)

- Scrollable list of items.

GestureDetector Widget
GestureDetector(
onTap: () {
print("Tapped!");
},
child: Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
child: Text("Tap Me"),
),
)

- Detects tap and other gestures.

SnackBar Widget
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Hello")),
);

- Temporary message at the bottom.

AlertDialog Widget
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text("Notice"),
content: Text("This is a dialog"),
),
);

- Dialog box to show alerts or options.

You might also like