Flutter - Assignment 05
Flutter - Assignment 05
1. Create a custom Flutter widget named "GradientButton". Design a button widget with a
gradient background and rounded corners. Allow customization of the button text,
gradient colors, and button size. Integrate this custom widget into an existing Flutter
app.
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
const GradientButton({
required Key key,
required this.text,
required this.gradientColors,
this.width = 200,
this.height = 50,
required this.onPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
colors: gradientColors,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: TextButton(
onPressed: onPressed,
child: Text(
text,
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
);
}
}
Output:
2. Create a login page named "Login Page". Design a screen with two
text input fields for
username and password, and a login button. Apply appropriate styling
using themes to
enhance the visual appeal of the login page.
Code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
Output:
QUES-3:Develop a counter app named"Counter++. Implement a Flutter app
with a text widget displaying a counter initialized to zero. Include two buttons
labeled "Increment" and "Decrement" to increase and decrease the counter
value, respectively.
CODE:
import 'package:flutter/material.dart';
void main() {
runApp(CounterApp());
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter++'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Counter:',
style: TextStyle(fontSize: 24),
),
Text(
'$_counter',
style: TextStyle(fontSize: 36, fontWeight:
FontWeight.bold),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
ElevatedButton(
onPressed: _decrementCounter,
child: Text('Decrement'),
),
],
),
],
),
),
);
}
}
OUTPUT:
QUES-4:
++++++++++++++++
Create a Flutter app named "Message App". Design a screen with a button
labelled "Change Message" and a text widget displaying "Hello, Flutter!". On
pressing the button, change the text to "Flutter is awesome!".
CODE:
import 'package:flutter/material.dart';
void main() {
runApp(MessageApp());
}
void _changeMessage() {
setState(() {
_message = 'Flutter is awesome!';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Message App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_message,
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _changeMessage,
child: Text('Change Message'),
),
],
),
),
);
}
}
OUTPUT: