Scribd
Upload
3 views5 pages

Steps To Create Qoute App 3

This document outlines a lesson for creating a simple three-screen Flutter application that displays quotes about hard work, featuring unique background colors and navigation buttons. It includes prerequisites, folder structure, and step-by-step implementation for each screen using basic Flutter widgets. The lesson aims to help beginners understand key concepts such as Scaffold, Navigator, and Buttons in Flutter development.

Uploaded by

muhammadjunaidkhan090
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views5 pages

Steps To Create Qoute App 3

This document outlines a lesson for creating a simple three-screen Flutter application that displays quotes about hard work, featuring unique background colors and navigation buttons. It includes prerequisites, folder structure, and step-by-step implementation for each screen using basic Flutter widgets. The lesson aims to help beginners understand key concepts such as Scaffold, Navigator, and Buttons in Flutter development.

Uploaded by

muhammadjunaidkhan090
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Flutter Lesson: Three Screen Quote App

Lesson Overview
In this lesson, we will create a simple Flutter application that displays quotes about hard
work on three different screens. Each screen will have a unique background color and
navigation buttons to move between screens. This app is beginner-friendly and uses basic
Flutter widgets.

Prerequisites
Before starting this lesson, make sure you have the following installed:

- Flutter SDK

- Visual Studio Code or Android Studio

- Basic knowledge of Dart programming language

Folder Structure

lib/
│
├─ main.dart // Main Entry Point
├─ first_screen.dart // First Screen (Green)
├─ second_screen.dart // Second Screen (Orange)
└─ third_screen.dart // Third Screen (Pink)

Step-by-Step Implementation

1. main.dart
This file is the entry point of the application. It starts the app and loads the FirstScreen.

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

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: FirstScreen(),
);
}
}

2. first_screen.dart
This screen displays the first quote with a green background and a button to move to the
next screen.

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

class FirstScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
appBar: AppBar(title: Text('Screen 1')),
body: Column(
children: [
Expanded(
child: Center(
child: Text(
'"Hard work beats talent when talent doesn’t work
hard."',
style: TextStyle(fontSize: 24, color:
Colors.white),
textAlign: TextAlign.center,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
SecondScreen()),
);
},
child: Text('Next Screen'),
),
),
SizedBox(height: 30),
],
),
);
}
}

3. second_screen.dart
This screen displays the second quote with an orange background and buttons to navigate
forward and backward.

import 'package:flutter/material.dart';
import 'first_screen.dart';
import 'third_screen.dart';

class SecondScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orange,
appBar: AppBar(title: Text('Screen 2')),
body: Column(
children: [
Expanded(
child: Center(
child: Text(
'"Success is the sum of small efforts, repeated
day in and day out."',
style: TextStyle(fontSize: 24, color:
Colors.white),
textAlign: TextAlign.center,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Previous'),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
ThirdScreen()),
);
},
child: Text('Next'),
),
],
),
SizedBox(height: 30),
],
),
);
}
}

4. third_screen.dart
This screen displays the third quote with a pink background and a button to return to the
previous screen.

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

class ThirdScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink,
appBar: AppBar(title: Text('Screen 3')),
body: Column(
children: [
Expanded(
child: Center(
child: Text(
'"There are no shortcuts to any place worth
going."',
style: TextStyle(fontSize: 24, color:
Colors.white),
textAlign: TextAlign.center,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Previous'),
),
),
SizedBox(height: 30),
],
),
);
}
}

Conclusion

In this lesson, we learned how to create a simple three-screen Flutter app with navigation
and background colors. This project helps beginners understand basic widgets like Scaffold,
Navigator, and Buttons.

You might also like