Assignment of Flutter
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());
}
class GradientButton extends StatelessWidget {
final String text;
final List<Color> gradientColors;
final double width;
final double height;
final VoidCallback onPressed;
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,
),
),
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gradient Button Example',
home: Scaffold(
appBar: AppBar(
title: Text('Gradient Button Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GradientButton(
key: Key('myButton'),
text: 'Click Me',
gradientColors: [Colors.blue, Colors.green],
onPressed: () {
print('Button clicked');
},
),
],
),
),
),
);
}
}
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());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login Page Example',
theme: ThemeData(
primaryColor: Colors.blue,
hintColor: Colors.blueAccent,
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blueAccent,
width: 2.0,
),
borderRadius: BorderRadius.circular(10.0),
),
labelStyle: TextStyle(
color: Colors.blueAccent,
),
),
),
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 300,
child: TextField(
decoration: InputDecoration(
labelText: 'Username',
),
),
),
SizedBox(height: 20),
SizedBox(
width: 300,
child: TextField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// Login logic
},
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 50,
vertical: 10),
child: Text(
'Login',
style: TextStyle(fontSize: 18),
),
),
),
],
),
),
),
);
}
}
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());
}
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter++',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
int _counter = 0;
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());
}
class MessageApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Message App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MessageScreen(),
);
}
}
class MessageScreen extends StatefulWidget {
@override
_MessageScreenState createState() => _MessageScreenState();
}
class _MessageScreenState extends State<MessageScreen> {
String _message = 'Hello, Flutter!';
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:
