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