Scribd
Upload
173 views

Flutter Introduction and Dummy App Workshop

This document provides an overview of Flutter app development. It discusses what Flutter is, introduces the Dart programming language, and provides an overview of key Flutter concepts like widgets, stateless and stateful widgets, and building basic user interfaces. It also includes steps for creating a simple Reddit clone app as an example Flutter project.

Uploaded by

ubd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
173 views

Flutter Introduction and Dummy App Workshop

This document provides an overview of Flutter app development. It discusses what Flutter is, introduces the Dart programming language, and provides an overview of key Flutter concepts like widgets, stateless and stateful widgets, and building basic user interfaces. It also includes steps for creating a simple Reddit clone app as an example Flutter project.

Uploaded by

ubd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

l at f o r m A p p

Cross P
p m e n t w i th
Develo
Topics Covered

=== What is Flutter ===


======= A Quick Introduction to Dart =======
========== Flutter Overview ==========
=== Your first app - A Reddit Clone ===
W h a t i s
Creating Custom UI’s and Animations is easy in Flutter
Popular Cross Platform App Development
Frameworks
Getting Started with Flutter

If you don’t have Flutter dartpad.dartlang.org/em


installed, bed-flutter.html?sample_
You can use an online id=material.Scaffold.1
Flutter Editor for UI OR

Head over to this website


bit.ly/2WFgTD4
Creating an App

Using Cmd line Using VSCode


● Goto parent directory (‘say ● Ensure Flutter extension is
~/projects) installed
● Run the following ● Press CTRL + SHIFT + P
● Select Flutter: New Project
flutter create --org "com.dscdtu"
-i objc -a java "example_app" ● Enter Name and Project Location
Running an App

● Connect your phone and Turn on USB debugging in settings (if not already)
○ On the device, go to Settings > About <device>.
○ Tap the Build number => 7 times to make Settings > Developer options
available.
○ Then enable the USB Debugging option
● Run the App
○ CMD line => flutter run
○ VSCode => invoke Debug > Start Debugging or press F5.
A
Quick Intro
to
Language Key Points

● Everything is an Object, There are no primitive types.


Everything inherits from the ‘Object’ Class.
● Dart is strongly typed, but it can infer types statically.
For variables with dynamic type, use the keyword
dynamic.
● Dart supports generic types, like List<int> or
Map<String, dynamic>
● Similar to C++, Dart supports top level variables and
functions
Language Key Points

● Code execution begins with the main() function.


● Unlike Java, Dart doesn’t have the keywords public,
protected, and private. If an identifier starts with an
underscore (_), it’s private.
● Identifiers can start with a letter or underscore (_),
followed by any combination of those characters plus
digits.
● Uninitialized variables have an initial value of null. (As
of Dart 2.X)
Variables

1. int ca = 30;
2. String d = "This is a String";
3. // automatic static inference
4. var e = "This is a String Object";
5. const f = "This is a constant String Object"; // compile time
constant
6.
7. // equivalent to final String g = “This is a…”;
8. final g = "This is a final String Object";
9. // dynamic objects
10. dynamic h = 10; // it was an Int
11. h = "a String"; // but now it's a String
12. h = 10.02; // and now it's a Double
Functions
1. // function with optional positional parameter
2. int example1(int a, [int b = 10]) {
3. return a + b;
4. }
5. // function with optional named parameter
6. String example2(int a, {String str1 = "default", String str2}) {
7. return str1 + str2;
8. }
9. // lambda or arrow function (just a shorthand, returns a+b)
10. int add(int a, int b) => a + b;
11. //==========================================================
12. //=============== calling functions =====================
13. example2(10, str2: "hello", str1: "world");
String Interpolation, Async Functions and Null aware operators
1. // string interpolation
2. var a = 10, b = "number";
3. String s = "${a.toString()} is a $b"; // prints: 10 is a number
4.
5. // async function, called just like a normal function,
6. void delayPrint() async {
7. await Future.delayed(Duration(seconds: 1));
8. print("Sorry to keep u waiting");
9. }
10.
11. // Null aware operators
12. a?.toString(); // only calls toString if a is not null
13. int x = a ?? 10; // sets x to a, or 10 if a is null
A
rv i e w o f
u i c k O v e
Q
Widgets in Flutter
A minimal Flutter App
Stateless and Stateful Widgets

class Car extends StatelessWidget { class Car extends StatefulWidget {


Car({ Key key, @required child }) :
Car({ Key key }) : super(key: super(key: key);
key);
@override
@override _CarState createState() => _CarState();
Widget build(BuildContext context) }
{
return Container( class CarState extends State<Car> {
color: Colors.blue, @override
); Widget build(BuildContext context) {
} return Container(
} color: Colors.blue,
child: Text("Hello"),
);
}
}
Working of a Stateful Widget

Slider Widget
Range: 0 - 1 (default)
Basic Widgets
Basic Widgets
Basic Widgets
a F l u t t e r
Lets make
APP
Reddit Clone
Link to Live Flutter-Web App and Full code at this repository

github.com/mannprerak2/quick_clone_reddit

Shortened url => bit.ly/33iyiUO


bit.ly/2Nl
72iS
feedback form

You might also like