Scribd
Upload
0 views

week2@flutterUI (2)

This document provides an overview of Flutter widgets, including their types and functionalities. It explains visible widgets like Text and Image, along with their customization options and usage in building layouts. Additionally, it covers single and multiple child widgets, demonstrating layout structures using Row, Column, and Stack widgets with code examples.

Uploaded by

Godha Nemmarugommula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

week2@flutterUI (2)

This document provides an overview of Flutter widgets, including their types and functionalities. It explains visible widgets like Text and Image, along with their customization options and usage in building layouts. Additionally, it covers single and multiple child widgets, demonstrating layout structures using Row, Column, and Stack widgets with code examples.

Uploaded by

Godha Nemmarugommula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

DEPARTMENT OF INFORMATION TECHNOLOGY

EXPERIMENT-2

AIM:

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

Introduction to widgets, Different types of widgets (e.g., Text, Button, Image),Building


layouts with widgets Customizing widgets.

DESCRIPTION:

Flutter Widgets:

In Flutter, the application is itself a widget. The application is the top- level widget and
its UI is build using one or more children (widgets), which again build using its children
widgets. This composability feature helps us to create a user interface of any complexity.

For example, the widget hierarchy of the hello world application (created in previous
chapter) is as specified in the following diagram –

Types of Widget:

We can split the Flutter widget into two categories:

1. Visible (Output and Input)


2. Invisible (Layout and Control)

Visible widget

The visible widgets are related to the user input and output data. Some of the important types of
this widget are:

a. Text:

A Text widget holds some text to display on the screen. 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. We can use it as like below code
snippets.
CODE:

new Text(

'Hello VBIT!',

textAlign: TextAlign.center,

style: new TextStyle(fontWeight: FontWeight.bold),

b. Image:

This widget holds the image which can fetch it from multiple sources like from the asset folder
or directly from the URL. It provides many constructors for loading image, which are given
below:

· Image: It is a generic image loader, which is used by ImageProvider.

· asset: It load image from your project asset folder.

· file: It loads images from the system folder.

· memory: It load image from memory.

· network: It loads images from the network.

To add an image in the project, you need first to create an assets folder where you keep your
images and then add the below line in pubspec.yaml file.

assets:

- assets/
Now, add the following line in the dart file.

SYNTAX: Image.asset('assets/computer.png')

The complete source code for adding an image is shown below in the hello world example.

CODE:

class MyHomePage extends StatelessWidget {


MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application.
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: Image.asset('assets/computer.png'),
),
);
}
When you run the app, it will give the following output.

OUTPUT:

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

Single Child Widgets

The single child layout widget is a type of widget, which can have only one child widget inside
the parent layout widget. These widgets can also contain special layout functionality.

Code for Single child:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// It is the root widget of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Multiple Layout Widget',
debugShowCheckedModeBanner: false,
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("FittedBox Widget")),
body: Center(
child: FittedBox(child: Row(
children: <Widget>[
Container(
child: Image.asset('assets/computer.png'),
),
Container(
child: Text("This is a widget"),
)
],
),
fit: BoxFit.contain,
)
),
);
}
}

OUTPUT:

Multiple Child widgets:

The multiple child widgets are a type of widget, which contains more than one child widget, and
the layout of these widgets are unique

Row: It allows to arrange its child widgets in a horizontal direction.

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

// It is the root widget of your application.


@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Multiple Layout Widget',

debugShowCheckedModeBanner: false,

theme: ThemeData(

// This is the theme of your application.

primarySwatch: Colors.blue,

),

home: MyHomePage(),

);

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Container(

alignment: Alignment.center,

color: Colors.white,

child: Row(

children: <Widget>[

Expanded(

child: Text('Peter', textAlign: TextAlign.center),


),

Expanded(

child: Text('John', textAlign: TextAlign.center ),

),

Expanded(

child: FittedBox(

fit: BoxFit.contain, // otherwise the logo will be tiny

child: const FlutterLogo(),

),

),

],

),

),

);

}
}

OUTPUT:

You might also like