Week 6,7,8 UI Design Flutter
Week 6,7,8 UI Design Flutter
import 'package:flutter/material.dart';
CustomButton({
required this.label,
required this.onPressed,
this.color = Colors.blue,
});
@override
return ElevatedButton(
onPressed: onPressed,
child: Text(label),
);
Output:
6b) Apply styling using themes and custom styles.
import 'package:flutter/material.dart';
// Include the Google Fonts package to provide more text format options
// https://pub.dev/packages/google_fonts
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(const MyApp());
const MyApp({super.key});
@override
return MaterialApp(
title: appName,
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.purple,
brightness: Brightness.dark,
),
textTheme: TextTheme(
fontWeight: FontWeight.bold,
),
titleLarge: GoogleFonts.oswald(
fontSize: 30,
fontStyle: FontStyle.italic,
),
bodyMedium: GoogleFonts.merriweather(),
displaySmall: GoogleFonts.pacifico(),
),
),
title: appName,
),
);
@override
return Scaffold(
appBar: AppBar(
title: Text(title,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Theme.of(context).colorScheme.onSecondary,
)),
backgroundColor: Theme.of(context).colorScheme.secondary,
),
body: Center(
child: Container(
horizontal: 12,
vertical: 12,
),
color: Theme.of(context).colorScheme.primary,
child: Text(
// to "displayLarge" or "displaySmall".
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(
// "Colors.blue".
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.pink,
brightness: Brightness.dark,
),
),
child: FloatingActionButton(
onPressed: () {},
),
),
);
Output:
Week-7:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
@override
return MaterialApp(
home: FormPage(),
);
@override
String? _selectedGender;
void _submitForm() {
if (_formKey.currentState!.validate()) {
print('Email: ${_emailController.text}');
print('Gender: $_selectedGender');
@override
return Scaffold(
body: Padding(
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _nameController,
validator: (value) {
return null;
},
),
SizedBox(height: 16),
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
validator: (value) {
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return null;
},
),
SizedBox(height: 16),
DropdownButtonFormField<String>(
value: _selectedGender,
return DropdownMenuItem<String>(
value: gender,
child: Text(gender),
);
}).toList(),
setState(() {
_selectedGender = newValue;
});
},
validator: (value) {
if (value == null) {
return null;
},
),
SizedBox(height: 16),
Row(
children: [
Checkbox(
value: _acceptTerms,
setState(() {
});
},
),
Flexible(
),
],
),
SizedBox(height: 16),
ElevatedButton(
onPressed: _submitForm,
child: Text('Submit'),
),
],
),
),
),
);
}
Output:
import 'package:flutter/material.dart';
const MyApp({super.key});
@override
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
),
),
);
const MyCustomForm({super.key});
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
// Create a corresponding State class.
//
// not a GlobalKey<MyCustomFormState>.
@override
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
return null;
},
),
Padding(
child: ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
);
},
),
),
],
),
);
Output:
Week-8:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
@override
Widget build(BuildContext context) {
return MaterialApp(
home: AnimationPage(),
);
@override
with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
);
CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
),
);
_controller.forward(); // Start the animation
@override
void dispose() {
_controller.dispose();
super.dispose();
@override
return Scaffold(
body: Center(
child: FadeTransition(
opacity: _fadeAnimation,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text(
'Fade In!',
),
),
),
),
),
);
Output:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
@override
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnimationDemo(),
);
@override
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
);
parent: _controller,
curve: Curves.easeInOut,
));
void _toggleFade() {
setState(() {
_isVisible = !_isVisible;
if (_isVisible) {
_controller.forward();
} else {
_controller.reverse();
});
void _toggleSlide() {
setState(() {
_isVisible = !_isVisible;
if (_isVisible) {
_controller.forward();
} else {
_controller.reverse();
});
@override
void dispose() {
_controller.dispose();
super.dispose();
@override
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _toggleFade,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleSlide,
child: Text('Toggle Slide Animation'),
),
SizedBox(height: 50),
// Fade Animation
FadeTransition(
opacity: _fadeAnimation,
child: Container(
width: 200,
height: 100,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
'Fade Animation',
),
),
),
// Slide Animation
SlideTransition(
position: _slideAnimation,
child: Container(
width: 200,
height: 100,
color: Colors.green,
alignment: Alignment.center,
child: Text(
'Slide Animation',
),
),
),
],
),
),
);
Output: