Experiment-6:
a)Aim: To create custom widgets for specific UI elements.
Description:
In Flutter, custom widgets help break large UI code into reusable components. This
approach:
Reduces redundancy
Makes code easier to maintain
Encourages separation of UI logic
This experiment demonstrates how to build and use custom stateless widgets and pass data
to them via constructors.
Program:
import 'package:flutter/material.dart';
void main() {
runApp(CustomWidgetApp());
}
class CustomWidgetApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Widgets Demo',
home: Scaffold(
appBar: AppBar(title: Text('Custom Widgets')),
body: Padding(
padding: constEdgeInsets.all(16.0),
child: Column(
children: [
CustomCardWidget(
title: 'Flutter',
description: 'Build beautiful native apps.',
icon: Icons.flutter_dash,
),
SizedBox(height: 20),
CustomCardWidget(
title: 'Dart',
description: 'Programming language for Flutter.',
icon: Icons.code,
),
],
),
),
),
);
}
}
// Custom Widget
class CustomCardWidget extends StatelessWidget {
final String title;
final String description;
final IconData icon;
CustomCardWidget({
required this.title,
required this.description,
required this.icon,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: ListTile(
leading: Icon(icon, size: 40, color: Colors.blue),
title: Text(title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
subtitle: Text(description),
),
);
}
}
Output:
b)Aim: To apply styling using themes and custom styles.
Description:
Flutter allows global styling using the ThemeData object in MaterialApp. This enables
centralized control over colors, fonts, and widget appearances. Themes can define styles for
buttons, text, and other UI elements. You can also create custom text styles and apply them
throughout the app for uniform branding and appearance.
Program:
import 'package:flutter/material.dart';
void main() {
runApp(ThemeDemoApp());
}
class ThemeDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Theme Demo',
theme: ThemeData(
primarySwatch: Colors.indigo,
scaffoldBackgroundColor: Colors.grey[200],
textTheme: TextTheme(
headline6: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.indigo),
bodyText2: TextStyle(fontSize: 16, color: Colors.black87),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
textStyle: TextStyle(fontSize: 18),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
),
),
home: ThemeHomePage(),
);
}
}
class ThemeHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Themed App', style:
Theme.of(context).textTheme.headline6?.copyWith(color: Colors.white)),
),
body: Padding(
padding: constEdgeInsets.all(16.0),
child: Column(
children: [
Text('Welcome to Flutter Styling!', style: Theme.of(context).textTheme.headline6),
SizedBox(height: 20),
Text(
'This is a sample paragraph styled using the theme body text.',
style: Theme.of(context).textTheme.bodyText2,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
child: Text('Styled Button'),
),
],
),
),
);
}
}
Output:
