Scribd
Upload
23 views17 pages

Flutter Demo

The document is a guide for building basic UI and simple stateful widgets in Flutter, covering the setup of the Android Studio environment and useful commands for Flutter development. It outlines the steps to create a new Flutter project, the importance of using Android Studio over VS Code, and introduces key concepts such as stateless and stateful widgets. Additionally, it lists essential Flutter widgets and provides a brief overview of prerequisites and tasks for creating a Flutter app.

Uploaded by

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

Flutter Demo

The document is a guide for building basic UI and simple stateful widgets in Flutter, covering the setup of the Android Studio environment and useful commands for Flutter development. It outlines the steps to create a new Flutter project, the importance of using Android Studio over VS Code, and introduces key concepts such as stateless and stateful widgets. Additionally, it lists essential Flutter widgets and provides a brief overview of prerequisites and tasks for creating a Flutter app.

Uploaded by

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

FLUTTER DEMO

Building Basic UI and Simple Stateful Widgets

By Shubhradeep Sarkar
Under the supervision of Prof. Tanmoy Biswas
Things we will cover

[Link] Studio Environment


[Link] Basic UI
[Link] and Stateful
Part 1
Creating a new flutter project Useful commands (For VS code user)
• flutter create appname
Two platforms • flutter pub get
• VS Code IDE • flutter clean
• Android Studio IDE • flutter run
(Preferable) • Etc………………
Most of these commands we can do
using a button click in android studio. A
very less amount is required to write in
terminal.

Why use Android Studio? Why we should avoid VS Code?


Ans: To avoid less commands and to handle less errors. Ans: Manual Flutter SDK, Manual Android SDK, No
As the name suggest It is user friendly to create android proper running environment, Creating and running
apps in android studio. apps is more complex, a lot more issues…...
Lets Create a new flutter project in Android Studio

Steps:
1. Click File then Close project if any project is
opened and not required. Otherwise click File
create new flutter project Note:
2. Click next choosing the flutter SDK (Already 1. New Flutter Project Option
Selected just click next) Not Showing?
3. Give Project name (lower_case) 2. Flutter SDK not showing?
4. Choose Project Location
5. Click Create (Remaining are optional and as it is) Tell Teacher
6. If A project was already opened it will ask to
choose new window or current window. Click New
window.
First thing first

Check all the files……….


Note:
1. File Missing?

Tell Teacher
Second thing Second

Run the given App by


how teacher told
Note:
1. App Not running

Tell Teacher
Now We Are Ready
Part 2

Android Studio Environment


How to Run App

1. Windows (We need Visual Studio Setup)


2. Web (We need Internet)
3. Emulator (We need High Processor)
4. Physical Phone (Exam Hall Not Allowed)
5. IOS (No need)
File Hierarchy

Where all files are


arranged properly
[Link]

Task

Create Asset and Edit [Link]

Add Font

Note: For Exam avoid Online dependency


because you can’t handle these errors now
Now the real game begins…….

Prerequisites:
1. Basic Knowledge in Programming
2. CSS Box Model
3. Dart Basic (For Normal app not much otherwise Advance Dart)
Three Pillars of Flutter

VOID MAIN() & RUNAPP STATELESS STATEFUL


class NewStateFul extends StatefulWidget {
const NewStateFul({[Link]});
class NewStateless extends StatelessWidget {
const NewStateless({[Link]});
void main() { @override
State<NewStateFul> createState() =>
runApp(const MyApp()); @override _NewStateFulState();
} Widget build(BuildContext context) { }
return const Placeholder();
} class _NewStateFulState extends State<NewStateFul> {
@override
}
Widget build(BuildContext context) {
return const Placeholder();
}
}
Lots of Widgets……

1. Scaffold
2. Drawer
3. BottomNavigationBar
4. Routes
5. Material
6. MaterialApp
7. Column and Row
8. Container & Animated Container
9. SizedBox
10. InkWell
11. Text
12. Form
13. A Lot more……………………..
Live Demo…..
1. Stateless App with a Image

2. Stateful App which Rolls a dice randomly


This is not the End……………..

You might also like