0% found this document useful (0 votes)
14 views15 pages

Chapter 1

Uploaded by

ysmaeljcas2001
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
0% found this document useful (0 votes)
14 views15 pages

Chapter 1

Uploaded by

ysmaeljcas2001
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/ 15

Flutter :

What is flutter?
Flutter is Google’s portable UI framework for building modern, native, and reactive
applications for ios and Android.
Flutter is open-source?
Yes, Is an Open-source project hosted on GitHub.

What language does he use?


He uses Dart, a modern object-oriented language that compiles to native ARM code and
production-heady JavaScript code.

Flutter uses the skia 2D rendering engine.

What is dart?
Is the language that you’ll use to develop your flutter applications.
Dart is Ahead-of-time (AOT)?
Yes, dart is ahead-of-time(AOT) compiled to native code, making your flutter application fast.

Dart is just-in-time (JIT)?


Yes, making it fast to display your code changes such as via flutter’s stateful reload feature.

Flutter is declarative?
Yes, in other words, flutter buils the ui to reflect the state of the app.
When the state (data) changes, the UI is redrawn, and flutter constructs a new instance of the
widget.
In what language is the flutter code compiled?
In ARM.
What do you have access to?

Use the graphics processing unit (GPU), and can access specific IOS and Android APIs( like
GPS location, image library)

Flutter uses its own rendering engine to draw widgets.

What is a widget?
Widgets can be compared to LEGO blocks; you create an object, and by adding
different kinds of blocks.
For example:
Say an architect draws a blueprint of a house; All of the objects like walls, windows,
and doors in the house are the widgets.
And all of THEM WORK together to create the house or, in this case, the application.

Since widgets are the configuration pieces of the UI and together they create the widget
tree

How does flutter use these configurations?


Flutter uses the widget as the configuration to build each ele ment, which means the
element is the widget that is mounted (rendered) on the screen.

What widgets are needed to build the graphical interface?


You use two main types of widgets, StatelessWidget and StatefulWidget.

When is used statelessWidget?


When the values (state) do not change.

When is used statefulWidget?


When value (state) change.

Each stateless or stateful widdget has a build method with a BuildContext that handlesthe
location of the widget in the widget tree.

The statelessWidget LifeCycle:


What is?
A statelessWidget is built based on its own configuration and does on change
dynamically.
The statelessWidget is declared with one class.
How many times can the widget be called?
The method of the statelessWidget can be called from three different scenarios.
1) When the widget is created
2) When the widget’s parent changes
3) When an InheritedWidget has changed

Class JournalList extends StatelessWidget {


@override
Widget build (BuildContext context){
Return Container();
}
}
The statefulWidget Lifecycle:

What is?
A statefulWidget is built based on its own configuration but can change dynamically.
The values can change based on the user’s interaction.

How many classes do you need to declare a stateful?


The stateful widget is declared with two classes. The statefulwidget class and the state
class.

How does it work?


When the state changes, the widget is rebuilt. If the statefulwidget is removed from the tree
and then inserted back into the tree sometime in the future, a new state object is created.
GlobalKey(Unique key across entire app) -> to reuse the state object

setState() -> you call the method to notify the framework that this object has changes.

Class JournalEdit extends statefulWidget{


@override
_JournalEditState createState() => _JournalEditState()

Class _JournalEditState extends State<JournalEdit>{


@override
Widget build(BuildContext context) {
Return Container();
}
}

You can override different portions of the statefulWidget to customize and manipulate data at
different points of the widget lifecycle.

The stateful widget main overrides:


initState()
didchangeDepencies()
Dispose()
Build() -> you use this method all of the time to build your UI.

METHOD:
initState() -> Called once when this object is inserted into the tree.
@override
Void initState(){
Super.initState():
Print(‘iinitState’);
}

Dispose() -> called when this object is removed from the tree permanently
@override
Void dispose(){
Print(‘dispose’);
Super.dispose();
}

didChangeDependencies() -> Called when this State object changes.


@override
Void didChangeDependencies(){
Super.didChangeDependencies();
Print(‘didChangeDependencies’);
}
didUpdateWidget –(Contacts oldWidget) -> called when the widget configuration changes.

@override
Void didUpdateWIdget(Contacts oldWidget){
Super.didUpdateWidget(oldWidget);
Print(‘didUpdateWidget: $oldWidget’);
}

Deactivate() -> called when this object is removed from the tree.
@override
Void deactivate(){
Print(‘deactivate’);
Super. deactivate();
}

Build(BuildContext context) -> Can be called multiple times to build the UI, and the
BuildCOntext handles the location of this widget in the widget tree.
@override
Widget build(BuildContext context){
Print(‘build’);
Return Container();
}

setState() -> Notifies the framework that that the state of this object has changed to schedule
calling the build for this state object
setState( () {
name =_newValue;
}

Understanding the widget tree and the element tree:


The mounted elements displayed on the screen create the element tree. You now two trees;

Is the app a widget?


Yes.
The following is sample code that starts a flutter application and the runApp() method inflates
the MyApp statelessWidget, meaning the main application itself is awidget
Void main() => runApp(MyApp());
Class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
Return MaterialApp(
Title:’Flutter App’,
Theme: ThemeData(
primarySwatch: Colors.blue,
),
Home: MyHomePage(title:’Home’),
);
}
}

Stateless Widget and Element trees:


Can a StatelessWidget create a stateless element?
Yes, in other words, the flutter framework makes a request from the widget to create an
element and then mounts(adds) the element to the element tree.

How many trees are generated and why?


Two widgets, the widget tree and the element tree.
How does is work?
The flutter framework makes a request from the widget to create an element and then mounts
(adds) the element to the element tree.
Each element contains a reference back to the widget.
The element calls the widget’s build method to check for children widgets, each child widget
(like an Icon or text) creates its own element and is mounted to the element tree.
Class JournalList extends StatelessWidget{
@override
Widget build(BuildContext context){
Return Row(
Children: <widget>[icon(), Text(),
])}}

069891111
Rue peaul posture db à tournai
19 Août , c’est la formation d’électricité

La séance de formation > parler de tous sur la construction-> 10 octobre 9 :00


[email protected]

Si vous n’êtes

Configuration de l’accélération graphique :

L'accélération graphique utilise le matériel de votre ordinateur (généralement le


GPU) pour accélérer le rendu à l'écran. Les appareils Android ont recours à
OpenGL for Embedded Systems (OpenGL ES ou GLES) pour le rendu des
graphismes 2D et 3D à l'écran.

Lorsque vous créez un appareil virtuel Android (AVD) dans AVD Manager, vous
pouvez spécifier si l'émulateur doit utiliser l'accélération matérielle ou logicielle
pour émuler le GPU de l'AVD. L'accélération matérielle, qui est généralement
plus rapide, est recommandée. Toutefois, vous devrez peut-être recourir à
l'accélération logicielle si votre ordinateur utilise des pilotes graphiques non
compatibles avec l'émulateur.

AVD es el dispositivo, avd est le dispositif, avd is devices


Configurer l’accélération graphique à partir de la ligne de commande :
Emulator -avd

emulator -avd avd_name -gpu mode [{-option [value]} ... ]

On peut faire ce pas dans l’application, mais on peut aussi spécifier un type d’accélération
graphique :
Emulator -avd avd_name -gpu mode [{-option [value]}]
Emulator -avd avd_application -gpu mode auto
mode:
auto, host, swiftshader_indirect, angle_indirect, guest
Si vous activez une option d'accélération graphique non compatible avec votre ordinateur,
des images incorrectes risquent de s'afficher lors de l'émulation.

Activer le rendu skia pour l’interface utilisateur Android :


Skia sert pour améliorer le graphique et la vitesse de l’application.

Chercher l’adresse de commands-tools line


Chercher adb.exe
Exécuter adb shell

su
setprop debug.hwui.renderer skiagl
stop
start
Configurer l’accélération de la VM sous Windows :
Windows Hypervisor Platform (WHPX)
Android Emulator Hypervisor Driver (AEHD)

Choisir un hyperviseur sous Windows :


Vous devez exécuter Hyper-V en même temps qu’Android Emulator. Utilisez WHPX.

Vous n’avez pas besoin d’exécuter Hyper-V en même temps qu’Android Emulator.

You might also like