LAB 6

Activities
List of Experiments
 Creation of a user interface using Flutter widgets.
 Implementation of Button Widgets and navigation between screens.
 Adjustment of padding, spacing, and alignment for better visual appearance.
 Testing the app on different devices and screen sizes to ensure
responsiveness.
 Identifying and debugging issues or errors encountered during testing.

What you will LEARN

 How to design user interfaces using Flutter widgets such as Button Widgets
and navigation between screens.
 how to arrange widgets, apply styling, and manage layout to create visually
appealing and functional user interfaces.
 Application testing on different devices.

Button Widgets in Flutter

Buttons are one of the most used widgets in Flutter. Because they are a fundamental
tool for user interaction, triggering actions within the app and facilitating navigation.
Flutter’s flexibility and customization capabilities make it possible to create a wide
variety of visually appealing buttons.
Before moving on to the design part, there are basically three types of buttons:
ElevatedButton, TextButton and OutlinedButton. Understanding the basic differences
between these button types can help us choose our buttons correctly.
ElevatedButton
 By default it has a raised effect, meaning that the background color is raised
significantly. And a corresponding shading effect appears behind it.

ElevatedButton(
onPressed: () {},
child: const Text('Elevated Button'),
),
TextButton
 It represents a text-based button and usually has a simpler appearance. The
background color is either absent or has a light color.

TextButton(
onPressed: () {},
child: const Text('Text Button'),
),

OutlinedButton
 It looks like a hollow button with defined edges. The outer edges are outlined
with a striped frame, hence the name.

OutlinedButton(
onPressed: () {},
child: const Text('Outlined Button'),
),
IconButton
 We use it for buttons that contain only one icon by this way we get a minimal
image.

IconButton(
onPressed: () {},
icon: const Icon(Icons.home),
iconSize: 32.0,
),

Style Features
 In Flutter, we can customize buttons as we wish through the “style” property.
 We can specify individual style properties for each button type through
special functions such
as ElevatedButton.styleFrom, TextButton.styleFrom andOutlinedButton.styleFr
om.
 For example
 shadowColor: shading color,
 elevation: height of the button above the floor,
 textStyle: style properties of the text to be displayed on the button,
 padding: the space between the content of the button and its edges,
 shape: button shape, borders, corner rounding style,
 duration: there are many customizable features such as animation duration.
 Apart from these, we can adjust the button width with the size property.
style: ElevatedButton.styleFrom(
minimumSize: Size(200, 50), // adjust width and height
),

 We can bind the color of the button to a condition and dynamically change it
to a different color when that condition is met.

style: ElevatedButton.styleFrom(
backgroundColor: someCondition ? Colors.blue : Colors.red,
),A

 To make the button as large as its content, we can place the Expanded widget

inside it.

Expanded(
child: ElevatedButton(
onPressed: () {},
child: const Text('You can click the button as many times as you want.'),
),
),
  We can use row and column widgets to customize the content of the button
and add multiple elements.

ElevatedButton(
onPressed: () {},
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.star),
SizedBox(width: 8),
Text('Like'),
],
),
),

App Structure and Navigation

 Navigation is a very important feature of any Web/Mobile application as it
allows you to browse from one page to another.
 We can achieve navigation in our flutter app using push(), pop() methods, or
by writing our own routes.
 Let’s consider FirstScreen and SecondScreen as two different classes in
FirstScreen.dart file and SecondScreen.dart respectively.

FirstScreen.dart file as :

import 'package:flutter/material.dart';
import 'package:navigation/SecondScreen.dart';

class FirstScreen extends StatefulWidget {

@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Hello to First Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"First Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
));
}
}

Ans SecondScreen.dart file as,

import 'package:flutter/material.dart';

class SecondScreen extends StatefulWidget {

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

class _SecondScreenState extends State<SecondScreen> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Welcome on Second Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"Second Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
),
);
}
}

And my main.dart should be,

import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
void main() {
runApp(MaterialApp(
home: FirstScreen()));
}

Navigate to a New Screen and Back

 We can navigate page/screen by Navigator.push() method and
Navigator.pop() method.
 In order to navigate from FirstScreen to SecondScreen on RaisedButton
pressed event then, we would need to write Navigot.push()code in the build()
method of FirstScreen inside onPressed(){} event of RaisedButton as follows:

onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondScreen()));
},

 Navigator.push() method pushes the given route onto the stack of routes
which is maintained by Navigator class.
 Now to get this route, we can use MaterialPageRoute or we can create our
own route.
 To push a new route on the stack, we can create an instance of
MaterialPageRoute with a builder function that creates a widget that you want
to show on the screen.
 second context , “(context) => SecondScreen() “ is the context of
SecondScreen.
 In order to come back from SecondScreen to FirstScreen on pressed event of
RaisedButton, we would need Navigator.pop() method in build() function of
SecondScreen inside onPressed(){} event of RaisedButton as follows:

onPressed: () {
Navigator.pop(context);
},

 here pop() method pops the topmost route from the navigator stack that
most tightly encloses the given context.

Navigate with Named Routes

 Define the routes by providing additional properties to
the MaterialApp constructor: the initialRoute and the routes themselves.

import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
import 'package:navigation/SecondScreen.dart';
void main() {
runApp(MaterialApp(
initialRoute: '/firstScreen',
routes: {
'/firstScreen': (context) => FirstScreen(),
'/secondScreen': (context) => SecondScreen(),
},,
home: FirstScreen()));
}

 The initialRoute property defines which route the app should start with.
The routes property defines the available named routes and the widgets to
build when navigating to those routes.
 In route property while navigating to ‘/firstScreen’, FirstScreen widget builds.
 Similarly, while navigating to ‘/secondScreen’, SecondScreen widget builds.
 Now we have to change our onPressed(){} event in FirstScreen as,

onPressed: () {
Navigator.pushNamed(context, '/secondScreen');
},
 here Navigator.pushNamed(), navigate to the second screen using named
route.
 onPressed(){} event in SecondScreen remains same with Navigator.pop()

onPressed: () {
Navigator.pop(context);
},
 Lab Task
 Create Screen Given Below and do navigation Between them.