FLUTTER & E-Notes

Learning strategy:
  Let Ali teach
 In the meanwhile, Learn dart basics by yourself.
 https://docs.flutter.dev/cookbook
 https://dartpad.dev/?
 For help getting started with Flutter development, view the [online
documentation] (https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.

NOTES:
1. Name of classes in upper Camel case, e.g. CamelCase
2. Material App provides material UI for Google Apps Look & Feel.
3. Scaffold is a class in flutter which provides many widgets or we can
say APIs like Drawer, SnackBar, BottomNavigationBar,
FloatingActionButton, AppBar, etc. Scaffold will expand or occupy
the whole device screen. It will occupy the available space.
4. Type parameters start with lower case.
5. Screen with input fields will have their respective controller made
inside the respective screen class.
6. Underscore before a variable name makes it private for that class.
7. Dart DOES NOT provide keywords like: “Public”, “Private” &
“Protected”
8. Null safety is checked by either placing ! or ??
9. In Dart, we use the late keyword to declare variables that will be
initialized later. These are called non-nullable variables as they are
initialized after the declaration. Hence, we use the late keyword.
Note: Once we declare a non-nullable late variable, the variable can’t be null at
runtime.
 10.Difference b/w var and dynamic DATATYPES in DART:
https://jelenaaa.medium.com/flutter-question-of-the-day-series-
4d6d19794532#:~:text=If%20a%20variable%20is%20declared,type%20can
%20change%20over%20time.&text=If%20you%20declare%20variable%20as,assigned
%20type%20can%20not%20change.

Syntax

late data_type variable_name;

https://www.educative.io/answers/what-is-the-late-keyword-in-dart
11. final vs const keyword: https://flutteragency.com/variables-
marked-as-final-in-flutter-custom-classes/#:~:text=A%20variable
%20with%20the%20final,method%20will%20be%20initialized
%20again.
12. Var; open data type to store data of any type.
13. ObjectBox flutter
database https://pub.dev/packages/objectbox
14. Future ?

15.
A variable of type double cannot be assigned to type int, three is a VAR:

16.
17. ALI PLZ FIND ERROR IN BELOW:
List: List data type is similar to arrays in other programming languages. A list is
used to represent a collection of objects (can be a heterogenous collection) . It is
an ordered group of objects.

myList is growable but myList2 is not:

Growable, integer specific myList:
Now default value set to String:

Sorts in ascending:
Sorts in descending:

https://www.geeksforgeeks.org/dart-data-types/
https://www.geeksforgeeks.org/how-to-replace-a-substring-of-a-string-
in-dart/?ref=rp
https://www.geeksforgeeks.org/dart-splitting-of-string/
Lambda functions:
are a short and simple way to express tiny functions. Lambda functions
are also known as arrow functions. Like any other function, a Lambda
function cannot execute a block of code. (Source:
https://www.educative.io/answers/how-to-use-lambda-functions-in-
dart-programming )

Dart Constructors
 https://www.freecodecamp.org/news/constructors-in-dart/
 https://www.tutorialspoint.com/dart_programming/
dart_programming_classes.htm#
 Named Constructor and initializer list:
Cascading Operators: (https://www.educative.io/answers/what-is-
dart-cascade-notation )
Keyboard Shortcuts:
1. Ctrl + j closes & opens up terminal
2. Ctrl + f5 runs a program.
3. Ctrl + b: closes left side menu
 4. Ctrl + Shift + p to install new dependencies
5. Alt + Shift + r to open a file in File Explorer
6. Ctrl + Alt + L; Auto Format in Android Studio
7. Alt + Enter; shows you possible widgets to wrap a child widget

Dart/Flutter Shortcuts:
1. We run “flutter pub get” to get all the dependencies listed in
the pubspec.yaml file in the current working directory, as well as
their transitive dependencies.
2. dart fix --dry-run; lets you see all of the proposed quick fixes.
3. dart fix --apply; will apply all of those fixes.
Types of Buttons in flutter:
1. Elevated Button:
https://api.flutter.dev/flutter/material/ElevatedButton-class.html

2.

ICONS:
 SMD-MID-1 LACKINGS:
1. RunApp(): The runApp() method in Flutter is used to start the execution of a Flutter
application. It takes a Widget as its argument, which represents the root of the widget
tree that makes up the app's user interface. The runApp() method creates a new
FlutterBinding instance, which initializes the framework and starts the rendering
pipeline. It also creates a WidgetsBinding instance, which manages the lifecycle of the
widget tree and handles input events and other system messages. By calling the
runApp() method, the developer signals to the Flutter framework that the app is ready
to be started, and the framework takes care of the rest of the setup and initialization.
2. Asynchronous data: Asynchronous data in Flutter refers to data that is not immediately
available and may take some time to load or fetch. This type of data is typically loaded
from a remote server or other external source, and its availability is not guaranteed at
the time the application is running.
In order to handle asynchronous data in Flutter, the framework provides several tools
and mechanisms, including Futures, Streams, and async/await syntax. Futures represent
a value that may not be available yet, and they allow developers to write code that
waits for a value to become available before continuing execution. Streams, as
 mentioned in the previous answer, allow developers to handle sequences of data that
arrive over time, such as data from a network connection.
The async and await keywords are used to write asynchronous code in a more
synchronous style, making it easier to read and write. The async keyword is used to
define a function that performs asynchronous operations, and the await keyword is
used to pause the execution of a function until a Future completes.
Overall, asynchronous data is an important concept in Flutter, as it allows developers to
build apps that are responsive and can handle data that is not immediately available.

3. Streams: In Flutter, streams are a way of handling asynchronous data. A stream is a

sequence of data that is continuously emitted over time, and it can be listened to by
multiple listeners at the same time. Streams are useful for handling events, data that
arrives over a network connection, or any other data that arrives over time and can't
be fetched synchronously.
In Flutter, the Stream class is used to represent a stream of data. Streams can be
created using the StreamController class, which allows developers to add data to a
stream and notify listeners when new data is available. To listen to a stream, developers
can use the StreamBuilder widget, which automatically rebuilds its child widget
whenever new data is emitted by the stream. Alternatively, they can use the listen()
method on a stream, which allows them to register a callback function that is called
whenever new data is available.
Streams are a powerful concept in Flutter and are widely used throughout the
framework, including for handling user input, managing state, and interacting with
external services.

4. Life Cycle of Stateful Events:

In Flutter, the lifecycle of a StatefulWidget is as follows:
i. createState(): This method is called when the widget is first created and the
framework creates a corresponding state object.
ii. initState(): This method is called once after the state object has been
created, and it is where developers can initialize any state data that the
widget needs.
iii. didChangeDependencies(): This method is called after initState(), and it is
where the widget can initialize any state data that depends on other
widgets in the tree.
 iv. build(): This method is called whenever the widget needs to be rebuilt,
such as when the state data changes or when the widget is inserted into
the tree.
v. didUpdateWidget(): It is called whenever the parent widget rebuilds and
can be used to update the state of the widget based on any changes in the
parent widget's properties.
vi. setState(): This method is used to update the state of the widget,
triggering a rebuild of the widget.
vii. deactivate(): This method is called when the widget is removed from the
tree, allowing the widget to clean up any resources it was using.
viii. dispose(): This method is called when the state object is being destroyed,
allowing the widget to release any resources it was using.
Overall, this lifecycle allows developers to manage the state of a widget and to
ensure that it is updated and rendered correctly as the app changes and evolves
over time. By properly managing the state of their widgets, developers can build
apps that are responsive, efficient, and easy to maintain.

5. initState():
6. BuiltContext(): The BuildContext class in Flutter is used to provide information about
the location of a widget within the widget tree. It is a fundamental part of the Flutter
framework and is used extensively throughout the API.
The BuildContext class provides a number of methods that allow widgets to interact
with their parent and child widgets in the tree. For example, the BuildContext can be
used to retrieve the Theme data, the MediaQueryData for the device, or the Navigator
for the app.
The BuildContext is typically passed as an argument to widget constructors, allowing
them to access the context of the widget in which they are being built. It is also used to
build child widgets within the build() method of a widget.
It's worth noting that the BuildContext is immutable and can't be modified directly by
the widget. Instead, it is used to provide information and context to the widget and its
children, allowing the framework to manage the widget tree and ensure that the app is
rendered correctly.

7. Performant: Making a Flutter app performant means optimizing the app's performance
to ensure that it is fast, responsive, and efficient. This involves reducing the app's
 startup time, minimizing the app's memory usage, and optimizing the app's rendering
performance.
To achieve optimal performance, developers should follow best practices such as using
efficient data structures, avoiding unnecessary rebuilds of widgets, minimizing network
requests, and reducing the size of assets and resources.
Some specific techniques that can be used to improve the performance of a
Flutter app include:
i. Using asynchronous programming techniques, such as Futures and
Streams, to minimize blocking the main thread and ensure that the app
remains responsive.
ii. Utilizing state management techniques, such as Provider or BLoC, to
manage the app's state in a centralized and efficient way.
iii. Optimizing the app's rendering performance by minimizing the number of
widgets that need to be rebuilt and reducing the complexity of widget
trees.
iv. Minimizing the app's memory usage by avoiding unnecessary object
allocations, using efficient data structures, and minimizing the size of assets
and resources.
v. By following these best practices and techniques, developers can create
Flutter apps that are fast, responsive, and efficient, providing a great user
experience for their users

8. Declarative Framework:
9. Reactive Programming:
10.Difference between network image and Image.network: In Flutter, both
NetworkImage and Image.network are used to load images from a network resource,
but they differ in their usage and behavior.
NetworkImage is a class that creates a widget that displays an image from a URL. It's
typically used when the image is the primary content of the widget, such as in an Image
widget or inside CircleAvatar, backgroundImage property. It requires a valid URL to the
image resource, and the image is loaded asynchronously, so it may take some time to
appear on the screen. NetworkImage is also useful when you need to manipulate the
image in some way, such as decoding and resizing the image.
On the other hand, Image.network is a widget that takes a URL as an argument and
displays the corresponding image on the screen. It's typically used as a child widget of
another widget, such as a Column or ListView, and can be used to display multiple
 images in a single view. Like NetworkImage, the image is loaded asynchronously, and
the widget will update itself automatically once the image has loaded.
The main difference between the two is that NetworkImage is a widget builder, which
can be used to create an Image widget, while Image.network is a widget itself that can
be used directly in the widget tree.
In summary, NetworkImage is a class that creates an ImageProvider that can be used to
create an Image widget, while Image.network is a widget that can be used directly to
display an image.

11.Hide/Show Widgets: The Visibility widget is used to show or hide widgets in Flutter
based on a given condition. It takes a visible parameter that specifies whether the child
widget should be visible or hidden, and also provides options for controlling the space
occupied by the child widget when it is hidden.
Here's an example of how to use Visibility widget to show or hide a child widget based
on a boolean value:
dartCopy code
bool isVisible = false;
Visibility(
visible: isVisible,
child: Text('This text will be visible if isVisible is true'),
)
In this example, the Text widget will only be visible if isVisible is true. If isVisible is false,
the Text widget will be hidden, but its space will still be reserved in the layout. If you
want to completely remove the space occupied by the hidden widget, you can set the
maintainSize parameter to false:
dartCopy code
Visibility(
visible: isVisible, maintainSize: false,
child: Text('This text will be hidden along with its space when isVisible is false'),
)
In this example, the space occupied by the Text widget will be removed when isVisible
is false, so other widgets in the layout will move up to fill the space. This can be useful
for creating dynamic layouts where the size and position of widgets can change based
on user interactions or other conditions.

12.See Dart Language Tour: https://dart.dev/guides/language/language-tour

 13.Card ki hgt and width properties nahe hotein, we wrap it inside a SizedBox to give hgt
and width properties.

Basic Development with Flutter!

Course: By 10 Pearls

+ Center
 ROW and COLUMN are not scrollable widgets, they are just confined
on the screen size available.
 For scrollable widgets use ListView.
Getting Started with Flutter!
Course: By 10 Pearls
Loops in dart:
1. For
2. For..in
3. While
4. Do While

Functions in dart:
Example 3 has optional Positional parameter [int c]
Mixin? And Enum classes?
https://stackoverflow.com/questions/53142171/what-
does-underscore-before-variable-name-mean-for-flutter

Point 2 unclear
Inhertance in flutter:
https://flutterhope.com/inheritance-in-dart/#:~:text=In%20single
%20inheritance%2C%20a%20class,only%20a%20single%20parent
%20class.&text=Here%2C%20the%20child%20class%20can,own
%20unique%20properties%20and%20methods.&text=In%20the
%20above%20example%2C%20we,and%20inherited%20the%20Parrot
%20class.
 Basic Development with Flutter Cont’D –
10 Pearls University
Refer: Basic Development with Flutter project from folder and tasbeeh project
//Adding Date Picker:
initialDate is our attribute of state class, which we are changing
whenever the button is pressed to select Date.
//Adding Time Picker:
initialTime is our attribute of state class, which we are changing
whenever the button is pressed to select Time.

//Adding Text Formfield

//Dialogs
//Drawer

The ListView widget supports horizontal lists. Use the standard ListView
constructor, passing in a horizontal scrollDirection , which overrides the default
vertical direction.

//Listview.builder(ten_pearls_app project)
 Made a class of course
 Made a List of type course inside state class, and initialized attributes.
 Inside body, used Listview.builder:
//Listview.seperated: includes Divider()

Callback Functions (need more explanation)

 Mostly used while handling events.
 https://www.geeksforgeeks.org/flutter-working-with-callback-
functions/
 https://medium.flutterdevs.com/working-with-callback-in-
flutter-89dc207cba37

ANGELA YOU COURSE

Section: Intro
EXTRACTING A SCREEN FROM ALREADY BUILT
APPLICATION

1. Create a new project

2. Copy Assets, Lib, Fonts and pubspec.yml file contents from
original project to new project.
 Miss Angela’s course cont’d
Lecture: 03
Video: 024;
 I am rich app;
 MaterialApp(); Material App provides material UI for Google Apps
Look & Feel.
 MaterialApp(home: ); what widget the homepage of our app will
contain.
Making the text to appear at center of screen:

 Center widget centers anything/widget that is contained in it.

 Lecture: 04
Video: 026;

 We used Scaffold widget followed by Appbar, Color and Center

widgets.
 We also used properties of AppBar like: title, backgroundColor.
 Properties of Scaffold like: body, with Centre widget wrapped around
Image.network widget.
 Miss Angela’s course cont’d
Lecture: 05
Video: 027;
In this video we learnt how to add images from a
directory (folder we create) inside the project.
How to make changes in yaml file to add a folder
as assets that contain our images.
 Always put 2 spaces from gutter
 Be careful of indentation while updating yaml
file.
 If had error then delete the comments.
 Run “pub get” after changing yaml file

Module: 5 “I am Poor”
Lecture: 06
Video: 034;
 App Challenge; made my app: “I am very Rich- RUBY”

Module: 6 “MiCard”
 Video: 039;
 Taught how to clone a project from Github

 Video: 040;
 Hot reload & hot restart.
 Video: 041;
 Layout widgets:
https://docs.flutter.dev/development/ui/widgets/layout
1. Single child layout widgets: Sets layout for a SINGLE child widget
ONLY, e.g. Container, Padding, Margin.
2. Multi child Layout widgets: Sets layout for a MULTIPLE child widgets
e.g. Row, Coloum etc.
3.

Container (similar to div in html)

 If it doesn't have a child, it won't show on the screen. (QUIZ)
 A SafeArea widget encapsulates a child widget so that the child
widget does not hides itself behind screen notch, bezel or any
screen component like clock etc.

 Margin: is for the outside of your widget.

 Padding: is for the inside (child) of your widget.

 Both margin and padding properties use “EdgeInsets” widget to

customized themselves.
 Video: 042;
“How to use Column & Row Widgets for
Layout”
 Video: 043;
 “FLUTTER Layout Challenge”

 Video: 045 “Using Custom Fonts”;

“MiCard”
Steps:
1. Download the loved font from
https://fonts.google.com/specimen/Source+Sans+Pro?
query=source+sans
2. Unzip the files.
3. Make a new directory named “fonts” directly INSIDE the
project folder.
4. Drag the respective font ttf file in it.
5. Inside yaml file, include the respective fonts and keep a close
eye on INDENTATION (Refer:
https://docs.flutter.dev/cookbook/design/fonts )
6. Run “pub get”
7. Run “get Dependencies” in main.dart

 Video: 046 “Adding Material Icons with Icon

Widget - MiCard”

 Video: 047 “Flutter Card & ListTile Widgets -

MiCard”
 Card provides rounded corners.