Experiment No: 04

Experiment Name: Customizing the Application with Components.

Objective: The main goal of this project was to build a Flutter app with multiple screens.
It demonstrates how to use both stateful and stateless widgets, and how to customize the
app’s appearance using various tools like text boxes, sliders, images, buttons, and lists.
The project also shows how to navigate between different screens, giving a clear idea of
how real apps work. Overall, it’s a practical way to learn the core features of Flutter
while creating something functional.

Procedure:

1. Setting Up the Project:

I began by creating a new Flutter project using the flutter create command. After that, I
configured the pubspec.yaml file to include some image assets, which I later used in the app.

2. First Screen (Home Page):

The first screen features a text box where users can type their name or any text. As they
type, a greeting message updates in real-time to reflect their input. I also displayed two
images using Image.asset. A button on this screen allows the user to navigate to the
second screen.

3. Second Screen:
The second screen includes a slider that users can interact with to select a value. There's
also a fun image of Pikachu displayed on this screen. Additionally, I added a button that
takes the user to the third screen.

4. Third Screen:
The final screen contains a dynamic list where users can add or remove items. A text box
allows them to input new items, and each list item includes a delete icon to remove it.
There's also a button that navigates back to the first screen, completing the app’s flow.

import 'package:flutter/material.dart'; }
}
voidComadien((m) a{ in.dart):
runApp(MyApp()); class MyHomePage extends StatefulWidget
} { @override
_MyHomePageState createState() =>
class MyApp extends StatelessWidget { _MyHomePageState();
@override }
Widget build(BuildContext
context) { return MaterialApp( class _MyHomePageState extends
title: 'Interactive Flutter Demo', State<MyHomePage> {
theme: ThemeData(primarySwatch: TextEditingController _controller =
Colors.yellow), TextEditingController();
home: MyHomePage(), String _inputText = "";
);
 void _updateInputText() { context,
setState(() { MaterialPageRoute(builde
_inputText = _controller.text; r
}); : (context) => SecondPage()),
} );
},
@override child: Text('Go to Second
Widget build(BuildContext Page'),
context) { return Scaffold( ),
appBar: AppBar(title: ],
Text('Interactive Flutter Demo')), ),
body: Padding( ),
padding: const );
EdgeInsets.all(16.0), }
child: Column( }
mainAxisAlignment:
MainAxisAlignment.center, class SecondPage extends StatefulWidget
children: <Widget>[ { @override
Row( _SecondPageState createState() =>
mainAxisAlignment: _SecondPageState();
MainAxisAlignment.spaceEvenly, }
children: [
Image.asset('assets/images class _SecondPageState extends
/ State<SecondPage> {
Murshed.jpg', height: 150, width: 150), double _sliderValue = 0;
Image.asset('assets/
images/ @override
pikachu.jpg', Widget build(BuildContext
height: 150, width: context) { return Scaffold(
150), appBar: AppBar(title:
], Text('Second Page - Slider')),
), body: Padding(
SizedBox(height: 10), padding: const
TextField( EdgeInsets.all(16.0),
controller: _controller, child: Column(
decoration: children: <Widget>[
InputDecoration( Slider(
hintText: 'Input Name', value: _sliderValue,
), min: -20,
onChanged: (text) { max: 400,
_updateInputText(); divisions: 21,
}, label:
), _sliderValue.toStringAsFixed(1),
SizedBox(height: 20), onChanged: (double
Text( value) { setState(() {
'Hello $_inputText!', _sliderValue = value;
style: });
TextStyle(fontSize: },
30, fontWeight: FontWeight.bold), ),
), SizedBox(height: 20),
SizedBox(height: 20), Text(
 'Slider Value: return Scaffold(
${_sliderValue.toStringAsFixed(1)}', appBar: AppBar(title: Text('Third
style: TextStyle(fontSize: Page - List')),
20), body: Padding(
), padding: const
SizedBox(height: 20), EdgeInsets.all(16.0),
Image.asset('assets/images/ child: Column(
pika chu.jpg', height: 150), children: <Widget>[
SizedBox(height: 20), TextField(
ElevatedButton( controller:
onPressed: () { _itemController,
Navigator.push( decoration:
context, InputDecoration(labelText: 'Enter item
MaterialPageRoute(builde to add'),
r ),
: (context) => ThirdPage()), SizedBox(height: 10),
); ElevatedButton(onPressed:
}, _addItem, child: Text('Add Item')),
child: Text('Go to Third SizedBox(height: 20),
Page'), Expanded(
), child: ListView.builder(
], itemCount:
), _items.length,
), itemBuilder: (context,
); index) {
} return ListTile(
} title:
Text(_items[index]),
class ThirdPage extends StatefulWidget { trailing: IconButton(
@override icon:
_ThirdPageState createState() => Icon(Icons.delete),
_ThirdPageState(); onPressed: () {
} setState(() {
_items.removeAt(
class _ThirdPageState extends i
State<ThirdPage> { ndex);
List<String> _items = []; });
TextEditingController _itemController },
= ),
TextEditingController(); );
},
void _addItem() { ),
if (_itemController.text.isNotEmpty) ),
{ setState(() { Image.asset('assets/images/
_items.add(_itemController.text); unknow n.jpg', height: 150),
_itemController.clear(); SizedBox(height: 20),
}); ElevatedButton(
} onPressed: () {
} Navigator.pop(context);
},
@override child: Text('Back to Home
 ], }

), }
),

Output:

 Main Page (Home page): Displays two images, a TextField that dynamically updates
the greeting, and a button to navigate.

 Second Page: A slider updates a value in real-time and shows an image and navigation button.

 Third Page: Users can input and delete items in a dynamic list, with an image and back button.
Conclusion: In this lab, I learned how to make a Flutter app with more than one screen. I used
sliders, text boxes, lists, and pictures to make the app fun and easy to use. I also learned how to
let users do things in the app and go from one screen to another using Flutter’s two types of
widgets: stateful and stateless. This project showed me how to change and use different parts of
the app to make it work better and look nice.