UI DESIGN-FLUTTER LAB – AY – 2024-25 B.

Tech IV Year I Semester - IT- A & B

Lab Program 2
2. a) Explore various Flutter widgets (Text, Image, Container, etc.).

Flutter Text
 A Text is a widget in Flutter that allows us to display a string of text with a
single line in our application.
 We can align the text widget by using textAlign property, and style
property allow the customization of Text that includes font, font weight,
font style, letter spacing, color, and many more.
 Depending on the layout constraints, we can break the string across
multiple lines or might all be displayed on the same line.
 If we do not specify any styling to the text widget, it will use the
closest DefaultTextStyle class style. This class does not have any explicit
style.
 We can use it as like below code snippets.
1. new Text(
2. 'Hello, Brecw!',
3. textAlign: TextAlign.center,
4. style: new TextStyle(fontWeight: FontWeight.bold),
5. )

Text Widget Constructor:

The text widget constructor used to make the custom look and feel of our text
in Flutter:

const Text(String data,{

Key key,

TextStyle style,

StrutStyle strutStyle,

TextAlign textAlign,

TextDirection textDirection,

TextOverflow overflow,

bool softWrap,

Prepared by: G SUDHAKAR RAJU Page 1 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

double textScaleFactor,

int maxLines,

String semanticsLabel,

TextWidthBasis textWidthBasis,

TextHeightBehavior textHeightBehavior

The following are the essential properties of the Text widget used in our
application:

TextAlign: It is used to specify how our text is aligned horizontally. It also controls
the text location.

TextDirection: It is used to determine how textAlign values control the layout of

our text. Usually, we write text from left to right, but we can change it using this
parameter.

Overflow: It is used to determine when the text will not fit in the available space.
It means we have specified more text than the available space.

TextScaleFactor: It is used to determine the scaling to the text displayed by the

Text widget. Suppose we have specified the text scale factor as 1.5, then our
text will be 50 percent larger than the specified font size.

SoftWrap: It is used to determine whether or not to show all text widget content
when there is not enough space available. If it is true, it will show all content.
Otherwise, it will not show all content.

MaxLines: It is used to determine the maximum number of lines displayed in the

text widget.

TextWidthBasis: It is used to control how the text width is defined.

TextHeightBehavior: It is used to control how the paragraph appears between

the first line and descent of the last line.

Style: It is the most common property of this widget that allows developers to
styling their text. It can do styling by specifying the foreground and background
color, font size, font weight, letter and word spacing, locale, shadows, etc. See
the table to understand it more easily:

Prepared by: G SUDHAKAR RAJU Page 2 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Attributes Descriptions

foreground It determines the paint as a foreground for the text.

background It determines the paint as a background for the text.

fontWeight It determines the thickness of the text.

fontSize It determines the size of the text.

fontFamily It is used to specify the typeface for the font. For this, we need
to download a typeface file in our project, and then keep
this file into the assets/font folder. Finally, config the
pubspec.yaml file to use it in the project.

fontStyle It is used to style the font either in bold or italic form.

Color It is used to determine the color of the text.

letterSpacing It is used to determine the distance between the characters

of the text.

wordSpacing It is used to specify the distance between two words of the

text.

shadows It is used to paint underneath the text.

decoration We use this to decorate text using the three parameters:

decoration, decorationColor, decorationStyle. The
decoration determines the location, decorationColor
specify the color, decorationStyle determine the shape.

Example 1: Text Widget

// main.dart

import 'package:flutter/material.dart';

void main() {
runApp(const HelloWorldApp());
}

class HelloWorldApp extends StatelessWidget {

const HelloWorldApp({Key? key}) : super(key: key);

Prepared by: G SUDHAKAR RAJU Page 3 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World App'),
),
body : const Center(
child: Text('Hello, World!!!'),
),
)
);
}
}

Output:

Flutter Images
 When you create an app in Flutter, it includes both code and assets
(resources).
 An asset is a file, which is bundled and deployed with the app and is
accessible at runtime.
 The asset can include static data, configuration files, icons, and images.
 The Flutter supports many image formats, such as JPEG, WebP, PNG, GIF,
animated WebP/GIF, BMP, and WBMP.
 Displaying images is the fundamental concept of most of the mobile
apps.
 Flutter has an Image widget that allows displaying different types of
images in the mobile application.
Prepared by: G SUDHAKAR RAJU Page 4 of 27
UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

How to display the image in Flutter

To display an image in Flutter, do the following steps:

Step 1: First, we need to create a new folder inside the root of the Flutter project
and named it assets. We can also give it any other name if you want.

Step 2: Next, inside this folder, add one image manually.

Step 3: Update the pubspec.yaml file. Suppose the image name

is logo.png, then pubspec.yaml file is:

1. assets:
2. - assets/logo.png
3. - assets/background.png

If the assets folder contains more than one image, we can include it by
specifying the directory name with the slash (/) character at the end.

1. flutter:
2. assets:
3. - assets/

Example 2: Image Widget

// main.dart
1. import 'package:flutter/material.dart';

2. void main() => runApp(MyApp());

3. class MyApp extends StatelessWidget {

4. @override
5. Widget build(BuildContext context) {
6. return MaterialApp(
7. home: Scaffold(
8. appBar: AppBar(
9. title: Text('Flutter Image Demo'),
10. ),
11. body: Center(
12. child: Column(
13. children: <Widget>[
14. Image.asset('images/brecwlogo.png'),
15. Text(

Prepared by: G SUDHAKAR RAJU Page 5 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

16. 'Bhoj Reddy Engineering College for Women -- Accredited by

NAAC with A grade',
17. style:TextStyle(fontSize: 20.0),
18. )
19. ],
20. ),
21. ),
22. ),
23. );
24. }
25. }

Output:

Step 1: Create a folder in your project directory with the name images and
copy the image into that directory. For example, here in this program copied
the brecwlogo.png file and the same is used in Line 14.

Step 2: open the pubspec.yaml and add the following code under flutter
section:

flutter:

assets:

- images/

# To add assets to your application, add an assets section, like this:

# assets:

# - images/

Save the file and debug main.dart with google chrome in the
VSCode/Android Studio and you can see the following output:

Prepared by: G SUDHAKAR RAJU Page 6 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Flutter Container
The container in Flutter is a parent widget that can contain multiple child
widgets and manage them efficiently through width, height, padding,
background color, etc. It is a widget that combines common painting,
positioning, and sizing of the child widgets. It is also a class to store one or more
widgets and position them on the screen according to our needs. Generally, it
is similar to a box for storing contents. It allows many attributes to the user for
decorating its child widgets, such as using margin, which separates the
container with other contents.

A container widget is same as <div> tag in html. If this widget does not contain
any child widget, it will fill the whole area on the screen automatically.
Otherwise, it will wrap the child widget according to the specified height &
width. It is to note that this widget cannot render directly without any parent
widget. We can use Scaffold widget, Center widget, Padding widget, Row
widget, or Column widget as its parent widget.

If we have a widget that needs some background styling may be a color,

shape, or size constraints, we may try to wrap it in a container widget. This
widget helps us to compose, decorate, and position its child widgets. If we
wrap our widgets in a container, then without using any parameters, we would
not notice any difference in its appearance. But if we add any properties such
as color, margin, padding, etc. in a container, we can style our widgets on the
screen according to our needs.

A basic container has a margin, border, and padding properties surrounding

its child widget, as shown in the below image:

Prepared by: G SUDHAKAR RAJU Page 7 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Constructors of the container class

The following are the syntax of container class constructor:

1. Container({Key key,
2. AlignmentGeometry alignment,
3. EdgeInsetsGeometry padding,
4. Color color,
5. double width,
6. double height,
7. Decoration decoration,
8. Decoration foregroundDecoration,
9. BoxConstraints constraints,
10. Widget child,
11. Clip clipBehavior: Clip.none
12. });

Properties of Container widget

Some of the essential properties of the container widget.

1. child: This property is used to store the child widget of the container. Suppose
we have taken a Text widget as its child widget that can be shown in the below
example:

1. Container(
2. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
3. )

2. color: This property is used to set the background color of the text. It also
changes the background color of the entire container. See the below
example:

1. Container(
2. color: Colors.green,
3. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
4. )

3. height and width: This property is used to set the container's height and width
according to our needs. By default, the container always takes the space
based on its child widget. See the below code:

Prepared by: G SUDHAKAR RAJU Page 8 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

1. Container(
2. width: 200.0,
3. height: 100.0,
4. color: Colors.green,
5. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
6. )

4. margin: This property is used to surround the empty space around the
container. We can observe this by seeing white space around the container.
Suppose we have used the EdgeInsets.all(25) that set the equal margin in all
four directions, as shown in the below example:

1. Container(
2. width: 200.0,
3. height: 100.0,
4. color: Colors.green,
5. margin: EdgeInsets.all(20),
6. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
7. )

5. padding: This property is used to set the distance between the border of the
container (all four directions) and its child widget. We can observe this by
seeing the space between the container and the child widget. Here, we have
used an EdgeInsets.all(35) that set the space between text and all four
container directions:

1. Container(
2. width: 200.0,
3. height: 100.0,
4. color: Colors.green,
5. padding: EdgeInsets.all(35),
6. margin: EdgeInsets.all(20),
7. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
8. )

6. alignment: This property is used to set the position of the child within the
container. Flutter allows the user to align its element in various ways such as
center, bottom, bottom center, topLeft, centerRight, left, right, and many
more. In the below example, we are going to align its child into the bottom
right position.

Prepared by: G SUDHAKAR RAJU Page 9 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

1. Container(
2. width: 200.0,
3. height: 100.0,
4. color: Colors.green,
5. padding: EdgeInsets.all(35),
6. margin: EdgeInsets.all(20),
7. alignment: Alignment.bottomRight,
8. child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),
9. )

7. decoration:

 This property allows the developer to add decoration on the widget.

 It decorates or paint the widget behind the child.
 If we want to decorate or paint in front of a child, we need to use
the forgroundDecoration parameter.
 The below image explains the difference between them where the
foregroundDecoration covers the child and decoration paint behind
the child.
 The decoration property supported many parameters, such as color,
gradient, background image, border, shadow, etc. It is to make sure
that we can either use the color property in a container or decoration,
but not in both.

Prepared by: G SUDHAKAR RAJU Page 10 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Example 3: Container Widget

// main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyStackWidget(),

);

class MyStackWidget extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text("Flutter Stack Widget Example"),

),

body: Center(

child: IndexedStack(

index: 0,

Prepared by: G SUDHAKAR RAJU Page 11 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

// index: 1,

children: <Widget>[

Container(

height: 250,

width: 250,

color: Colors.green,

child: Center(

child: Text(

'First Widget',

style: TextStyle(color: Colors.white, fontSize: 20),

),

),

),

Container(

height: 200,

width: 200,

color: Colors.blue,

child: Center(

child: Text(

'Second Widget',

style: TextStyle(color: Colors.white, fontSize: 20),

),

),

),

Prepared by: G SUDHAKAR RAJU Page 12 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

],

),

),

);

Output:

index: 0, index: 1,

Prepared by: G SUDHAKAR RAJU Page 13 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Flutter Scaffold
The Scaffold is a widget in Flutter used to implements the basic material design visual
layout structure. It is quick enough to create a general-purpose mobile application
and contains almost everything we need to create a functional and
responsive Flutter apps. This widget is able to occupy the whole device screen. In other
words, we can say that it is mainly responsible for creating a base to the app screen
on which the child widgets hold on and render on the screen. It provides many widgets
or APIs for showing Drawer, SnackBar, BottomNavigationBar, AppBar,
FloatingActionButton, and many more.

The Scaffold class is a shortcut to set up the look and design of our app that allows us
not to build the individual visual elements manually. It saves our time to write more
code for the look and feel of the app. The following are the constructor and
properties of the Scaffold widget class.

1. const Scaffold({
2. Key key,
3. this.appBar,
4. this.body,
5. this.floatingActionButton,
6. this.floatingActionButtonLocation,
7. this.persistentFooterButtons,
8. this.drawer,
9. this.endDrawer,
10. this.bottomNavigationBar,
11. this.bottomSheet,
12. this.floatingActionButtonAnimator,
13. this.backgroundColor,
14. this.resizeToAvoidBottomPadding = true,
15. this.primary = true,
16. })
1. appBar: It is a horizontal bar that is mainly displayed at the top of the Scaffold widget.
It is the main part of the Scaffold widget and displays at the top of the screen. Without
this property, the Scaffold widget is incomplete. It uses the appBar widget that itself
contains various properties like elevation, title, brightness, etc.
2. body: It is the other primary and required property of this widget, which will display
the main content in the Scaffold. It signifies the place below the appBar and behind
the floatingActionButton & drawer. The widgets inside the body are positioned at the

Prepared by: G SUDHAKAR RAJU Page 14 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

top-left of the available space by default.

3. drawer: It is a slider panel that is displayed at the side of the body. Usually, it is hidden
on the mobile devices, but the user can swipe it left to right or right to left to access
the drawer menu. It uses the Drawer widget properties slides in a horizontal
direction from the Scaffold edge to show navigation links in the application. An
appropriate icon for the drawer is set automatically in an appBar property.
The gesture is also set automatically to open the drawer.
4. floatingActionButton: It is a button displayed at the bottom right corner and floating
above the body. It is a circular icon button that floats over the content of a screen at a
fixed place to promote a primary action in the application. While scrolling the page, its
position cannot be changed. It uses the FloatingActionButton widget properties
using Scaffold.floatingActionButton.
5. backgroundColor: This property is used to set the background color of the
whole Scaffold widget.
backgroundColor: Colors.yellow,

6. primary: It is used to tell whether the Scaffold will be displayed at the top of
the screen or not. Its default value is true that means the height of the appBar
extended by the height of the screen's status bar.

primary: true/false,

7. persistentFooterButton: It is a list of buttons that are displayed at the bottom of the

Scaffold widget. These property items are always visible; even we have scroll the body
of the Scaffold. It is always wrapped in a ButtonBar widget. They are rendered below
the body but above the bottomNavigationBar.
8. bottomNavigationBar: This property is like a menu that displays a navigation bar at
the bottom of the Scaffold. It can be seen in most of the mobile applications. This
property allows the developer to add multiple icons or texts in the bar as items. It
should be rendered below the body and persistentFooterButtons.
9. endDrawer: It is similar to a drawer property, but they are displayed at the right side
of the screen by default. It can be swiped right to left or left to right.
10. resizeToAvoidBottomInset: If it is true, the body and the Scaffold's floating widgets
should adjust their size themselves to avoid the onscreen keyboard. The bottom
property defines the onscreen keyboard height.
11. floatingActionButtonLocation: By default, it is positioned at the bottom right corner
of the screen. It is used to determine the position of the floatingActionButton. It
contains many predefined constants, such as centerDocked, centerFloat, endDocked,
endFloat, etc.

Prepared by: G SUDHAKAR RAJU Page 15 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Flutter Row and Column

 The rows and columns are not a single widget; they are two different widgets,
namely Row and Column.
 Row and column are the two essential widgets in Flutter that allows developers
to align children horizontally and vertically according to our needs.
 These widgets are very necessary when we design the application user interface
in Flutter.

Key Points
1. Row and Column widgets are the most commonly used layout patterns in the Flutter
application.
2. Both may take several child widgets.
3. A child widget can also be a row or column widget.
4. We can stretch or constrain a particular children's widget.
5. Flutter also allows developers to specify how child widgets can use row and column
widgets' available space.

Row Widget
 This widget arranges its children in a horizontal direction on the screen. In
other words, it will expect child widgets in a horizontal array. If the child widgets
need to fill the available horizontal space, we must wrap the children widgets in
an Expanded widget.
 A row widget does not appear scrollable because it displays the widgets within
the visible view. So it is considered wrong if we have more children in a row
which will not fit in the available space. If we want to make a scrollable list of
row widgets, we need to use the ListView widget.
 We can control how a row widget aligns its children based on our choice using
the property crossAxisAlignment and mainAxisAlignment. The row's cross-
axis will run vertically, and the main axis will run horizontally. See the below
visual representation to understand it more clearly.

We can align the row's children widget with the help of the following properties:

Prepared by: G SUDHAKAR RAJU Page 16 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

o start: It will place the children from the starting of the main axis.
o end: It will place the children at the end of the main axis.
o center: It will place the children in the middle of the main axis.
o spaceBetween: It will place the free space between the children evenly.
o spaceAround: It will place the free space between the children evenly and half
of that space before and after the first and last children widget.
o spaceEvenly: It will place the free space between the children evenly and before
and after the first and last children widget.

Column
 This widget arranges its children in a vertical direction on the screen. In
other words, it will expect a vertical array of children widgets. If the child widgets
need to fill the available vertical space, we must wrap the children widgets in an
Expanded widget.
 A column widget does not appear scrollable because it displays the widgets
within the visible view. So it is considered wrong if we have more children in a
column which will not fit in the available space. If we want to make a scrollable
list of column widgets, we need to use the ListView Widget.
 We can also control how a column widget aligns its children using the property
mainAxisAlignment and crossAxisAlignment. The column's cross-axis will
run horizontally, and the main axis will run vertically. The below visual
representation explains it more clearly.

Drawbacks of Row and Column Widget:

o Row widget in Flutter does not have horizontal scrolling. So if we have inserted
a large number of children in a single row that cannot be fit in that row, we will
see the Overflow message.
o Column widget in Flutter does not have vertical scrolling. So if we have inserted
a large number of children in a single column whose total children size is not
equal to the height of the screen, we will see the Overflow message.

Prepared by: G SUDHAKAR RAJU Page 17 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Flutter Stack
The stack is a widget in Flutter that contains a list of widgets and positions them on
top of the other. In other words, the stack allows developers to overlap multiple
widgets into a single screen and renders them from bottom to top. Hence, the first
widget is the bottommost item, and the last widget is the topmost item

Key Points Related to Stack Widget

The following are the key points of the Flutter stack widget:

o The child widget in a stack can be either positioned or non-positioned.

o Positioned items are wrapped in Positioned widget and must have a one non-
null property
o The non-positioned child widgets are aligned itself. It displays on the screen
based on the stack's alignment. The default position of the children is in the top
left corner.
o We can use the alignment attribute to change the alignment of the widgets.
o Stack places the children widgets in order with the first child being at the
bottom and the last child being at the top. If we want to reorder the children's
widget, it is required to rebuild the stack in the new order. By default, the first
widget of each stack has the maximum size compared to other widgets.

How to use a stack widget in Flutter?

The below example that use of stack widget that contains three containers of shrinking
size:

1. Stack(
2. children: <Widget>[
3. // Max Size
4. Container(
5. color: Colors.green,
6. ),
7. Container(
8. color: Colors.blue,
9. ),
10. Container(
11. color: Colors.yellow,

Prepared by: G SUDHAKAR RAJU Page 18 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

12. )
13. ],
14. ),

Properties of the Stack Widget

The following are the properties used with the stack widget:

alignment: It determines how the children widgets are positioned in the stack. It can
be top, bottom, center, center-right, etc.

1. Stack(
2. alignment: Alignment.topCenter, // Center of Top
3. children: <Widget>[ ]
4. )

textDirection: It determines the text direction. It can draw the text either ltr (left to
right) or rtl (right to the left).

1. Stack(
2. textDirection: TextDirection.rtl, // Right to Left
3. children: <Widget>[ ]
4. )

fit: It will control the size of non-positioned children widgets in the stack. It has three
types: loose, expand and passthrough. The loose used to set the child widget small,
the expand attribute makes the child widget as large as possible, and
the passthrough set the child widget depending on its parent widget.

1. Stack(
2. fit: StackFit.passthrough,
3. children: <Widget>[ ]
4. )

Prepared by: G SUDHAKAR RAJU Page 19 of 27

 UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

overflow: It controls the children widgets, whether visible or clipped, when it's content
overflowing outside the stack.

1. Stack(
2. overflow: Overflow.clip, // Clip the Content
3. children: <Widget>[ ]
4. )

clipBehavior: It determines whether the content will be clipped or not.

Positioned
It is not the stack parameter but can be used in the stack to locate the children widgets.
The following are the constructor of the positioned stack:

1. const Positioned({
2. Key key,
3. this.left,
4. this.top,
5. this.right,
6. this.bottom,
7. this.width,
8. this.height,
9. @required Widget child,
10. })

Prepared by: G SUDHAKAR RAJU Page 20 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

2. b) Implement different layout structures using Row, Column, and Stack

widgets.

Example 1: Row Widget

// main.dart

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Row Example"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("IT",style:
TextStyle(color:Colors.yellowAccent,fontSize:25),),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(8.0),

Prepared by: G SUDHAKAR RAJU Page 21 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("CSE",style:
TextStyle(color:Colors.deepPurpleAccent,fontSize:25),),
),
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(8),
color:Colors.green
),
child: Text("CSM",style:
TextStyle(color:Colors.redAccent,fontSize:25),),
)
]
),
);
}
}

Output:

Prepared by: G SUDHAKAR RAJU Page 22 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Example 2: Column Widget

// main.dart

import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MyHomePage()

);

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

Prepared by: G SUDHAKAR RAJU Page 23 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

title: Text("Flutter Column Example"),

),

body: Column(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children:<Widget>[

Container(

margin: EdgeInsets.all(20.0),

padding: EdgeInsets.all(12.0),

decoration:BoxDecoration(

borderRadius:BorderRadius.circular(8),

color:Colors.red

),

child: Text("IT",style: TextStyle(color:Colors.cyanAccent,fontSize:20),),

),

Container(

margin: EdgeInsets.all(20.0),

padding: EdgeInsets.all(12.0),

decoration:BoxDecoration(

borderRadius:BorderRadius.circular(8),

color:Colors.red

),

child: Text("CSE",style:
TextStyle(color:Colors.yellowAccent,fontSize:20),),

),

Container(

Prepared by: G SUDHAKAR RAJU Page 24 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

margin: EdgeInsets.all(20.0),

padding: EdgeInsets.all(12.0),

decoration:BoxDecoration(

borderRadius:BorderRadius.circular(8),

color:Colors.red

),

child: Text("CSM",style:
TextStyle(color:Colors.amberAccent,fontSize:20),),

),

);

Output:

Prepared by: G SUDHAKAR RAJU Page 25 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Example 3: Stack Widget

// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStackWidget(),
);
}
}

class MyStackWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
clipBehavior: Clip.none,
children: <Widget>[
// Max Size Widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Top Widget: Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,

Prepared by: G SUDHAKAR RAJU Page 26 of 27

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Middle Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Bottom Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
)
),
],
),
)
),
);
}
}

Output:

Prepared by: G SUDHAKAR RAJU Page 27 of 27