UI DESIGN-FLUTTER LAB – AY – 2024-25 B.
Tech IV Year I Semester - IT- A & B
Lab Program 6
6. a) Create custom widgets for specific UI elements.
To create a custom button in Flutter, follow these steps:
1. Create a new Dart file for the custom button:
o Inside your lib folder, create a new file named custom_button.dart.
2. Add the following code to custom_button.dart (Create a new file and save
with the name custom_button.dart):
Explanation:
This CustomButton class creates a reusable button that takes three
parameters:
o text: The label on the button.
o onPressed: The callback function triggered when the button is
pressed.
o color: Optional, background color of the button (defaults to blue).
You can use this button in your main screen or any other widgets by
importing this file.
Use the custom button:
In any of your other Dart files, import custom_button.dart and use the
button like this:
import 'package:your_project_name/custom_button.dart'; if we keep in
the other package
import 'package:custom_button.dart'; if we keep in the same package
where main.dart exist
OR
import 'package:your_project_name/custom_button.dart'; if we keep in the
other package
1. Program Name: custom_button.dart
import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
final Color color;
Prepared by: G SUDHAKAR RAJU Page 1 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
CustomButton({
required this.text,
required this.onPressed,
this.color = Colors.blue,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: color, // Updated to backgroundColor
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15), // Padding
),
child: Text(
text,
style: TextStyle(fontSize: 16, color: Colors.white),
),
);
Prepared by: G SUDHAKAR RAJU Page 2 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
To create a custom text field in Flutter, you can create a separate Dart file for it.
1. Create a new Dart file in your lib folder, for example:
custom_text_field.dart.
2. Add the following code to that file to define a reusable CustomTextField
widget: custom_text_field.dart
Explanation:
This CustomTextField widget allows you to create a text field with
customizable properties like hintText, text input controller, and obscureText
(for password fields).
You can use this widget anywhere in your app by importing the
custom_text_field.dart file and then adding the CustomTextField to your
UI.
2. Program Name: custom_text_field.dart
import 'package:flutter/material.dart';
class CustomTextField extends StatelessWidget {
final String hintText;
final TextEditingController controller;
final bool obscureText;
CustomTextField({
required this.hintText,
required this.controller,
this.obscureText = false,
});
@override
Prepared by: G SUDHAKAR RAJU Page 3 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
Widget build(BuildContext context) {
return TextField(
controller: controller,
obscureText: obscureText,
decoration: InputDecoration(
hintText: hintText,
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
),
);
You can also create a separate Dart file for the CustomContainer widget to keep
your code modular and reusable.
1. Create a new Dart file in your lib folder, for example:
custom_container.dart.
2. Add the following code to that file to define the CustomContainer
widget:custom_container.dart
Explanation:
Color: You can pass the background color of the container.
Child: This widget will be placed inside the CustomContainer, allowing you
to reuse the container with different children.
Height and Width: You can optionally specify the height and width of the
container. If not provided, the default constraints will apply.
onTap: You can provide a function that will be executed when the
container is tapped, making the container interactive.
This CustomContainer is flexible and reusable, allowing you to wrap
different widgets inside it and make it tap-responsive.
Prepared by: G SUDHAKAR RAJU Page 4 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
3. Program Name: custom_container.dart
import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
final Color color;
final Widget child;
final double? height;
final double? width;
final VoidCallback? onTap;
CustomContainer({
required this.color,
required this.child,
this.height,
this.width,
this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
height: height,
Prepared by: G SUDHAKAR RAJU Page 5 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
width: width,
constraints: BoxConstraints(
minWidth: 100, // You can adjust these as needed
minHeight: 50,
),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10),
),
child: child,
),
);
Now Prepare your main.dart by importing the above three (3) dart files
Create a Main Dart File:
1. Create a new Dart file named main.dart in the lib folder or /Update the
exisisting named main.dart in your lib folder
2. Add the following code to that file:
Explanation:
CustomTextField: A text field where users can input text, and the value is
passed to the _controller.
CustomButton: The submit button that displays the input text when
pressed.
CustomContainer: A container that displays a message and shows a
snackbar when tapped.
Stateful Widget: Allows updating the UI when the button is pressed and
text is entered.
Prepared by: G SUDHAKAR RAJU Page 6 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
4. Program Name: main.dart
import 'package:flutter/material.dart';
import 'custom_button.dart'; // Import your custom button
import 'custom_text_field.dart'; // Import your custom text field
import 'custom_container.dart'; // Import your custom container
void main() {
runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
class _MyAppState extends State<MyApp> {
TextEditingController _controller = TextEditingController();
// Controller for the TextField
String _displayText = ''; // Variable to store the displayed text
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Widgets Demo',
Prepared by: G SUDHAKAR RAJU Page 7 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Custom Widgets Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
CustomTextField(
hintText: 'Enter your name',
controller: _controller, // Assign the controller
),
SizedBox(height: 20),
CustomButton(
text: 'Submit',
onPressed: () {
setState(() {
_displayText = _controller.text;
// Update displayText with the TextField value
});
},
Prepared by: G SUDHAKAR RAJU Page 8 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
),
SizedBox(height: 20),
Text(
_displayText.isNotEmpty ? _displayText : 'No input yet',
// Display the input or default message
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
CustomContainer(
color: Colors.grey[200]!,
height: 100,
width: double.infinity,
child: Center(
child: Text(
'This is a custom container',
style: TextStyle(fontSize: 18),
),
),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Custom Container tapped!')),
);
},
),
Prepared by: G SUDHAKAR RAJU Page 9 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
],
),
),
),
);
Output:
Prepared by: G SUDHAKAR RAJU Page 10 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
6. b) Apply styling using themes and custom styles.
Create a New project and copy the 3 user defined dart files (1. 2. 3. ) into
lib folder and modify your main.dart with following code:
Key Differences
Theme Enhancements:
Previous main.dart file: The theme only set the primarySwatch to Colors.blue.
New main.dart file: The theme includes:
1. brightness: Set to Brightness.light, defining the overall theme brightness.
2. Text Theme:
Introduces headlineLarge for the app bar title.
Defines bodyLarge for general text styling.
Adds labelLarge for button text styling.
3. Elevated Button Theme: Configures styles for elevated buttons throughout
the app, including padding and background color.
4. Input Decoration Theme: Standardizes input field appearance with rounded
borders and filled backgrounds.
Text Styling:
1. Previous main.dart file: The app bar and body text used inline TextStyle
definitions, which resulted in inconsistent styling.
2. New main.dart file: Uses Theme.of(context).textTheme for consistent styling
across the app. The app bar title and other texts pull from the defined text
theme, improving consistency.
Button Color:
1. Previous main.dart file: The button color was implicitly set within the
CustomButton widget and defaults to the primary theme color.
2. New main.dart file: The CustomButton uses a custom color (Colors.green)
directly in the CustomButton constructor, which allows for more flexibility.
Custom Container Color:
1. Previous main.dart file: The CustomContainer color was set to
Colors.grey[200]!.
2. New main.dart file: The color for CustomContainer is changed to
Colors.grey[300]!, slightly altering the visual aspect.
Consistency and Readability:
1. The new code significantly improves consistency and readability, making it
easier to maintain and understand the codebase.
Prepared by: G SUDHAKAR RAJU Page 11 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
Program: main.dart
import 'package:flutter/material.dart';
import 'custom_button.dart'; // Import your custom button
import 'custom_text_field.dart'; // Import your custom text field
import 'custom_container.dart'; // Import your custom container
void main() {
runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
class _MyAppState extends State<MyApp> {
TextEditingController _controller = TextEditingController();
// Controller for the TextField
String _displayText = ''; // Variable to store the displayed text
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
Prepared by: G SUDHAKAR RAJU Page 12 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
textTheme: TextTheme(
headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color:
Colors.blue),
bodyLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.normal),
labelLarge: TextStyle(fontSize: 16, color: Colors.white), // For buttons
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
textStyle: TextStyle(fontSize: 16),
),
),
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
filled: true,
fillColor: Colors.grey[200],
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
),
),
home: Scaffold(
appBar: AppBar(
title: Text('Custom Widgets Demo', style:
Theme.of(context).textTheme.headlineLarge),
),
Prepared by: G SUDHAKAR RAJU Page 13 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
CustomTextField(
hintText: 'Enter your name',
controller: _controller, // Assign the controller
),
SizedBox(height: 20),
CustomButton(
text: 'Submit',
onPressed: () {
setState(() {
_displayText = _controller.text;
// Update displayText with the TextField value
});
},
color: Colors.green, // Custom button color
),
SizedBox(height: 20),
Text(
_displayText.isNotEmpty ? _displayText : 'No input yet',
// Display the input or default message
style: Theme.of(context).textTheme.bodyLarge,
Prepared by: G SUDHAKAR RAJU Page 14 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
// Apply custom text style
),
SizedBox(height: 20),
CustomContainer(
color: Colors.grey[300]!,
height: 100,
width: double.infinity,
child: Center(
child: Text(
'This is a custom container',
style: Theme.of(context).textTheme.bodyLarge,
// Apply custom text style
),
),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Custom Container tapped!')),
);
},
),
],
),
),
), ); } }
Prepared by: G SUDHAKAR RAJU Page 15 of 16
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B
Output:
Prepared by: G SUDHAKAR RAJU Page 16 of 16
