Table of Contents
Flutter Hooks :
Flutter Hooks concept is spelled out in this element of the tutorial contemplating a uncomplicated counter instance this kind of that even a amateur starter can realize.
In general when you create a flutter venture you will be supplied with a counter case in point as a default code in number of other programming languages exhibiting of hello there world is specified.
Now as just about every 1 is conscious of the counter implementation it will be much easier to change the very same working with flutter hooks so you can only concentrate on hooks notion fairly than example.
Hooks in flutter are the objects utilized to handle everyday living cycle components of the widget we have talked over in element about the idea in beneath video clip tutorial, a should pay a visit to for rookies.
There are various phases in widget existence cycle we will be covering them in coming tutorials.
Flutter lifetime cycle parts:
createState
mounted genuine
initState
didChangeDependencies
construct
didUpdateWidget
setState
deactivate
dispose
mounted fake
https://www.youtube.com/enjoy?v=ix5bakY-Ox0
pubspec.yaml :
Enable us include flutter hooks as a dependency in pubspec file so that we can carry out hooks in flutter application.Make absolutely sure you give the most up-to-date model to avoid code conflicts..
dependencies:
flutter:
.
.
flutter_hooks: ^.18.3
primary.dart :
Permit us get started with void primary specifying a class MyApp() which will be likely to be our stateless widget further more from there we will apply HookWidget.
void main() runApp(const MyApp())
Now import the flutter hooks
import 'package:flutter_hooks/flutter_hooks.dart'
Declare MaterialApp
MaterialApp(
title: 'Flutter Demo',
concept: ThemeData(
primarySwatch: Colours.blue,
),
home: const HooksExample(),
)
Now let’s start off with flutter hooks.
Specify the variable counter with useState and provide original benefit to be zero.
last counter = useState()
Utilizing a floating motion button increment the benefit of counter
floatingActionButton: FloatingActionButton(
onPressed: ()
counter.value++
,
..
),
And try to populate the worth of the counter variable onto the screen.
Text("You have tapped $counter.worth occasions")
Full code for flutter hooks implementation working with counter example.
import 'package:flutter/substance.dart'
import 'package:flutter_hooks/flutter_hooks.dart'
void key()
runApp(const MyApp())
course MyApp extends StatelessWidget
const MyApp(Important? critical) : super(critical: key)
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
topic: ThemeData(
primarySwatch: Colors.blue,
),
house: const HooksExample(),
)
class HooksExample extends HookWidget
const HooksExample(Vital? essential) : super(critical: essential)
@override
Widget establish(BuildContext context)
closing counter = useState()
return MaterialApp(
residence: Scaffold(
appBar: AppBar(title: const Textual content("Hooks"),),
human body: Centre(
youngster: Column(
mainAxisAlignment: MainAxisAlignment.centre,
children: [
Text("You have tapped $counter.value times")
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: ()
counter.value++
,
little one: Icon(Icons.insert),
),
),
)
If you have any query’s on flutter hooks do let us know in the comment part underneath.If you like this tutorial do like and share us for far more appealing tutorials.
