Flutter Widgets Lab

Welcome to the Flutter Widgets Lab! In this lab, we'll be exploring the world of
widgets in Flutter and gradually implementing a simple page of a stock market
tracking app. Let's get started!

Prerequisites
Before we begin, make sure you have Flutter and Android Studio installed on your
computer. If you haven't done so already, please refer to the previous lab for
instructions on how to install these tools.

Using Material Components

Let's start by exploring how to use Material Components in our app. Material
Components are a set of pre-built widgets that follow the Material Design
guidelines and make it easy to create beautiful and consistent user interfaces.
Create a new flutter project then follow the steps below.
1. Replace the content of `main.dart` file with the following code then run the
app.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Widgets Demo'),
),
body: const Center( child: Text("Widgets Basics"),
(,
);
}
}

2. replace the `Text` widget in the `appBar` with a `Text` widget that greets the
user:
appBar: AppBar(
title: Text('Welcome to your stock market tracker!'),
),

3. Change the theme primarySwatch: Colors.purple,

4. Run your app and you should now see a greeting in the app bar.

Viewing the Widget Tree

One of the first things we'll do is learn how to view the widget tree using Android
Studio or Visual Studio Code. This will help us better understand the structure of
our app and how the different widgets are related to each other.
Open Android Studio and start a new Flutter project.
5. Open Android Studio and start a new Flutter project.
6. Once your project is open, click on the Flutter Inspector tab on the right
side of the screen.
7. You should now see a visual representation of your app's widget tree. As
you add more widgets to your app, this tree will update to reflect the
changes.
Basic Widgets
Now that we know how to view the widget tree, let's start adding some basic
widgets to our app. We'll begin by adding some text, columns, rows, and
containers to display today's value and percentage of revenue or loss for three
companies.
8. Open the `main.dart` file in your project.
9. Replace the contents of the `build` method with the following code:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome to your stock market tracker!'),
),
body: Column(
children: [
Text(
'Today\'s value: \$1000',
),
Text('Revenue/Loss: +5%'),
Column(
children: [
Text('Company 1: \$300'),
Text('Company 2: \$400'),
Text('Company 3: \$300'),
],
),
],
),
);
}
10. Run your app and you should see a basic layout with some text displaying
today's value and percentage of revenue or loss for three companies.

11. Practice changing the code to generate the output like the following
picture.
Changing Widgets in Response to User Gestures
Now that we've added some basic widgets to our app, let's learn how to change
widgets in response to user gestures. In this section, we'll add a button that shows
detailed analytics of the market when it's tapped.
12.In the `main.dart` file, add a new `StatefulWidget` called `AnalyticsButton`:
class AnalyticsButton extends StatefulWidget {
@override
_AnalyticsButtonState createState() => _AnalyticsButtonState();
}

class _AnalyticsButtonState extends State<AnalyticsButton> {

bool _showAnalytics = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {
setState(() {
_showAnalytics = !_showAnalytics;
});
},
child: Text('Show Analytics'),
),
if (_showAnalytics) Text('Detailed analytics go here...'),
],
);
}
}

13. Run your app and you should now see a button that shows detailed
analytics when it's tapped.
Responding to Widget Lifecycle Events
Finally, let's learn how to respond to widget lifecycle events such as initState and
dispose. In this section, we'll add a timer that simulates periodic updates on the
values of the companies.
14. In the `main.dart` file, refactor your code to extract the column of the
companies to a new `StatefulWidget` called `CompanyValues`:
class CompanyValues extends StatefulWidget {
@override
State<CompanyValues> createState() => _CompanyValuesState();
}

class _CompanyValuesState extends State<CompanyValues> {

List<int> _companyValues = [300, 400, 300];
Timer? _timer;
@override
void initState() {
super.initState();
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
setState(() {
_companyValues = [
_companyValues[0] + Random().nextInt(10) - 5,
_companyValues[1] + Random().nextInt(10) - 5,
_companyValues[2] + Random().nextInt(10) - 5,
];
});
});
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Company 1: \$${_companyValues[0]}'),
Text('Company 2: \$${_companyValues[1]}'),
Text('Company 3: \$${_companyValues[2]}'),
],
); }}
//Replace the `Column` widget that displays the company values with an
//instance of `CompanyValues`:
body: Column(
children: [
// ...
CompanyValues(),
// ...
],
),

15. Run your app and you should now see the values of the companies
updating periodically.
Flutter Layout Widgets Lab
In this lab, you'll practice applying the topics discussed in the presentation on
Flutter Layout Widgets by building a social media app. You'll implement the app in
different steps, applying one of the topics in each step. You'll also learn how to use
Android Studio to debug the layout visually.
Step 1: Create a new Flutter project.
• Open Android Studio and create a new Flutter project.
• Choose a name for your project and select a location to save it.
• Wait for Android Studio to create the project and install the necessary
dependencies.
Step 2: Add a Column widget
• Open the main.dart file.
• Inside the build method of the MyApp class, replace the Text widget with a
Column widget that has three Text widgets as its children.
• The first Text widget should display the string 'Profile Picture' while the
second Text widget should display the string 'Username' and the third Text
widget should display the string 'Bio'.
• Here's an example:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Layout Widgets Lab'),
),
body: Column(
children: <Widget>[
Text('Profile Picture'),
Text('Username'),
Text('Bio'),
],
),
),
);
}
}

• Save your changes and run the app.

• You should see that the three text widgets are laid out vertically on top of
each other.
Step 3: Add a Row widget
• Inside the build method of the MyApp class, add a Row widget as a child of
the Column widget.
• The Row widget should have three Text widgets as its children.
• The first Text widget should display the string 'Followers' while the second
Text widget should display the string 'Following' and the third Text widget
should display the string 'Posts'.

• Here's an example:
body: const Column(
children: <Widget>[
Text('Profile Picture'),
Text('Username'),
Text('Bio'),
Row(
children: <Widget>[
Text('Followers'),
Text('Following'),
Text('Posts'),
],
),
],
),

• Save your changes and run the app.

• You should see that the three text widgets are laid out horizontally next to
each other within the row.
Step 4: Add a Stack widget.
• Inside the build method of the MyApp class, replace the first Text widget
within the Column widget with a Stack widget that has two children.
• The first child of the Stack widget should be a CircleAvatar widget that
displays an image of your choice as its background image or use a general
person icon as a child.
• The second child of the Stack widget should be a Positioned widget that has
an Icon widget as its child.
• The Icon widget should display a checkmark icon to indicate that the profile
is verified.
• Here's an example:
body: Column(children: [
Stack(
children: const <Widget>[
CircleAvatar(
radius: 50.0,
child: Icon(
Icons.person,
size: 50,
),
),
Positioned(
top: 0,
right: 0,
child: Icon(
Icons.verified,
color: Colors.blue,
),
),
],
),
Text('Username'),
Text('Bio'),
])),

• Save your change and run the app.

• You should see that the profile picture is displayed within a circle and
that a checkmark icon is positioned relative to the top-right edge of the
circle.
Step 5: Add a GridView widget
• Inside the build method of the MyApp class, add a GridView widget as a
child of the Column widget.
• The GridView widget should have 5 Card widgets as its children.
• Each Card widget should have a Column containing an Image and a ListTile
widget as its child.
• Each ListTile widget should display a title with some text and a subtitle with
some text.
• Here’s an example
GridView.count(
crossAxisCount: 2,
childAspectRatio: 2,
children: <Widget>[
for (int i = 1; i < 6; i++)
Card(
elevation: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Image.network(
'https://picsum.photos/id/$i/600/200',
fit: BoxFit.fitWidth,
)),
ListTile(
title: Text('SWE 463: Lec $i'),
subtitle: Text('Posted on 0$i/09/2023'),
trailing: Column(
children: [
const Icon(
Icons.thumb_up_alt_rounded,
color: Colors.blue,
),
Text('${60 - i}')
],
),
),
],
),
),
],)