Dropdownlist Example in Flutter:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class DropdownDemo extends StatefulWidget {
const DropdownDemo({Key? key}) : super(key: key);
@override
State<DropdownDemo> createState() => _DropdownDemoState();
}
class _DropdownDemoState extends State<DropdownDemo> {
String dropdownValue = 'Area of circle';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("DDDD")),
body: Center(
child: Column(
children: [
SizedBox(
height: 50,
),
// Step 2.
DropdownButton<String>(
// Step 3.
value: dropdownValue,
// Step 4.
items: <String>['Area of circle', 'Area of Rectangle', 'Area of triangle ']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: TextStyle(fontSize: 30),
),
);
}).toList(),
// Step 5.
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
),
SizedBox(
height: 20,
),
Text(
'Selected Value: $dropdownValue',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
],
),
),
);
}
}
Richtext example in flutter:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class RitchTextExample extends StatelessWidget
{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Richtext example")),
body:Container(
child: Center(
child: RichText(
text: TextSpan(
text: 'Don\'t have an account',
style: TextStyle(color: Colors.black, fontSize: 20),
children: <TextSpan>[
TextSpan(text: ' Sign up',
style: TextStyle(color: Colors.blueAccent, fontSize: 20),
recognizer: TapGestureRecognizer()
..onTap = () {}
)
]
),
)
)
));
}
}
Slider Widget in Flutter:
import 'package:flutter/material.dart';
class SliderImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Image slider")),
body: const SliderWidget(),
);
}
}
class SliderWidget extends StatefulWidget {
const SliderWidget({super.key});
@override
State<SliderWidget> createState() => _SliderWidgetState();
}
class _SliderWidgetState extends State<SliderWidget> {
double _currentSliderValue = 0;
double _imageSize = 50; // Initial image size
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Slider Value: $_currentSliderValue',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
Container(
child: Image.asset("assets/images/congress.png"),
width: _imageSize,
height: _imageSize, // Change color as needed
),
SizedBox(height: 20),
Slider(
value: _currentSliderValue,
min: 0,
max: 100,
divisions: 10,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
// Update image size based on slider value
_imageSize = 50 + value; // Adjust this formula as needed
});
},
),
],
),
);
}
}
Snackbar Example in dart:
import 'package:flutter/material.dart';
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar Demo'),
),
body: Center(
child: TextButton(
child: Text(
'Show SnackBar',
style: TextStyle(fontSize: 25.0),
),
onPressed: () {
final snackBar = SnackBar(
content: Text('Hey! This is a SnackBar message.'),
duration: Duration(seconds: 5),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
),
)
);
}
}
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class TabbarExample extends StatefulWidget {
const TabbarExample({Key? key}) : super(key: key);
@override
State<TabbarExample > createState() => _MyCardExampleState();
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('It is a contact tab, which is responsible for displaying the contacts stored in your mobile',
style: TextStyle(fontSize: 32.0),
)
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Text('It is a second layout tab, which is responsible for taking pictures from your mobile.',
style: TextStyle(fontSize: 35.0),
),
),
);
}
}
class _MyCardExampleState extends State<TabbarExample> {
String dropdownValue = 'Mango';
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter Tabs Demo'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.contacts), text: "Tab 1"),
Tab(icon: Icon(Icons.camera_alt), text: "Tab 2"),
Tab(icon: Icon(Icons.camera_alt), text: "Tab 3")
],
),
),
body: TabBarView(
children: [
FirstScreen(),
SecondScreen(),
SecondScreen()
],
),
),
);
}
}
Tooltip Example in Flutter:
import 'package:flutter/material.dart';
class ToolTipExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar Demo'),
),
body: Center(
child: Tooltip(
message: 'This is a tooltip',
child: ElevatedButton(
onPressed: () {
// Button action
},
child: Text('Hover over me'),
),
),
)
);
}
}
import 'dart:async';
import 'package:flutter/material.dart';
class ProgressBarDemo extends StatefulWidget {
@override
_ProgressBarDemoState createState() => _ProgressBarDemoState();
}
class _ProgressBarDemoState extends State<ProgressBarDemo> {
double _progressValue = 0.0;
bool _loading = false;
void _startProgress() {
setState(() {
_loading = true;
});
// Simulate some async operation
Future.delayed(Duration(seconds: 10), () {
setState(() {
_loading = false;
_progressValue = 0.0; // Reset progress when done
});
});
// Update progress every 100 milliseconds
const progressIncrement = 0.01;
Timer.periodic(Duration(milliseconds: 100), (timer) {
setState(() {
if (_progressValue < 1.0) {
_progressValue += progressIncrement;
} else {
timer.cancel();
}
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Progress Bar Demo'),
),
body: Center(
child: _loading
? LinearProgressIndicator(value: _progressValue)
: ElevatedButton(
onPressed: _startProgress,
child: Text('Start Progress'),
),
),
);
}
}
Linear Progress bar example in Flutter:
import 'package:flutter/material.dart';
class ProgressbarExampleWidget extends StatefulWidget {
@override
_ProgressbarExampleWidgetState createState() => _ProgressbarExampleWidgetState();
}
class _ProgressbarExampleWidgetState extends State<ProgressbarExampleWidget> {
bool _loading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Progress Bar Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(12.0),
child: _loading
? LinearProgressIndicator()
: Text("Press button for downloading", style: TextStyle(fontSize: 25)),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_loading = !_loading;
});
},
tooltip: 'Download',
child: Icon(Icons.cloud_download),
),
);
}
}
POST Answer of Questions and ASK to Doubt