Flutter Hooks – Say no to Statefullwidget

Flutter Hooks :

Flutter Hooks concept is explained in this part of the tutorial considering a simple counter example such that even a novice beginner can understand.

In general when you create a flutter project you will be provided with a counter example as a default code in few other programming languages displaying of hello world is specified.

Now as every one is aware of the counter implementation it will be easier to convert the same using flutter hook so you can only concentrate on hooks concept rather than example.

Hooks in flutter are the objects used to manage life cycle components of the widget we have discussed in detail about the concept in below video tutorial, a must visit for beginners.

There are various phases in widget life cycle we will be covering them in coming tutorials.

Flutter life cycle components:

createState
mounted true
initState
didChangeDependencies
build
didUpdateWidget
setState
deactivate
dispose
mounted false

Flutter Hooks Video Tutorial :

Watch the following video tutorial for a more comprehensive step-by-step guide.

pubspec.yaml :

Let us add flutter hooks as a dependency in pubspec file so that we can implement hooks in flutter app.Make sure you provide the latest version to avoid code conflicts..

dependencies:
  flutter: ...
  flutter_hooks: ^0.18.3

main.dart :

Let us start with void main specifying a class MyApp() which will be going to be our stateless widget further from there we will implement HookWidget.

void main() {
  runApp(const MyApp());
}

Now import the flutter hook

import 'package:flutter_hooks/flutter_hooks.dart';

Declare MaterialApp

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: const HooksExample(),
);

Now let’s start with flutter hook.

Specify the variable counter with useState and provide initial value to be zero.

final counter = useState(0);

Using a floating action button increment the value of counter

floatingActionButton: FloatingActionButton(
  onPressed: (){
    counter.value++;
  },
  ..
),

And try to populate the value of the counter variable onto the screen.

Text("You have tapped ${counter.value} times")

Full code for flutter hook implementation using counter example.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HooksExample(),
    );
  }
}

class HooksExample extends HookWidget {
  const HooksExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return Scaffold(
      appBar: AppBar(title: const Text("Hooks")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("You have tapped ${counter.value} times"),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates