Flutter Tutorial - Flutter Keys & Global Key

With Flutter Keys & the Flutter Global Key, you can access the state of Stateful Widgets in Flutter. The main Flutter Keys are GlobalKey, ValueKey, UniqueKey, & ObjectKey.
Click here to Subscribe to Johannes Milke: th-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/key_...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
UniqueKey Tutorial: • Flutter Tutorial - Flu...
ValueKey Tutorial: • Flutter Tutorial - Flu...
Null Safety Tutorial: • Flutter Tutorial - Nul...
Migrate App To Null Safety Tutorial: • Flutter Tutorial - Mig...
Native Splash Screen Tutorial: • Flutter Tutorial - Nat...
Create Flutter Project For App Stores Tutorial: • Flutter Tutorial - Cre...
QR Code Scanner App Tutorial: • Flutter Tutorial - QR ...
Barcode Scanner App Tutorial: • Flutter Tutorial - Bar...
Onboarding UI Screen Tutorial: • Flutter Tutorial - Onb...
Date Picker & Time Picker Tutorial: • Flutter Tutorial - Dat...
Face ID - Local Auth Tutorial: • Flutter Tutorial - Fac...
Fingerprint - Local Auth Tutorial: • Flutter Tutorial - Fin...
App Internationalization Tutorial: • Flutter Tutorial - Loc...
TIMELINE
0:00 Introduction Flutter Global Key
0:34 Setup Global Key
2:06 Access State Of Stateful Widget
4:17 Global Key For Forms & Validation
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/key_global_example
UniqueKey Tutorial: th-cam.com/video/WhnB_5yjyWQ/w-d-xo.html
ValueKey Tutorial: th-cam.com/video/-F_5yHm_Zso/w-d-xo.html
Null Safety Tutorial: th-cam.com/video/Q_WloMNKOkU/w-d-xo.html
Migrate App To Null Safety Tutorial: th-cam.com/video/GLnQphHi1BY/w-d-xo.html
Native Splash Screen Tutorial: th-cam.com/video/8ME8Czqc-Oc/w-d-xo.html
Create Flutter Project For App Stores Tutorial: th-cam.com/video/4f1AO-f-jYQ/w-d-xo.html
QR Code Scanner App Tutorial: th-cam.com/video/Z32WsUiOegs/w-d-xo.html
Barcode Scanner App Tutorial: th-cam.com/video/Ezzx0eIB4WM/w-d-xo.html
Onboarding UI Screen Tutorial: th-cam.com/video/CQlA2p--oEg/w-d-xo.html
Date Picker & Time Picker Tutorial: th-cam.com/video/a_fGsywyL90/w-d-xo.html
Face ID - Local Auth Tutorial: th-cam.com/video/WIkdceaOUns/w-d-xo.html
Fingerprint - Local Auth Tutorial: th-cam.com/video/qTuVurGvdbM/w-d-xo.html
App Internationalization Tutorial: th-cam.com/video/Zw4KoorVxgg/w-d-xo.html

[@nerdbenana]

This is way better than the official video. Thanks for the explanation!

[@flavio.a]

Thank you for this tutorial. It helped me a lot!

[@yousour5112]

clear and perfect , thank you :)

[@mohammadal-sadiqh.3871]

Great explanation...
Thank you

[@enafor99]

thank you so much awesom tutorial:)

[@FitSanket]

Best teacher!!

[@cavidanbagiri7837]

Prosda Perfecto Teacher. You Are Krasavcik

[@zerocel]

thank you !!! finally useful!!!

[@heisenberg5873]

Best video about key

[@yasmeenabushaar2019]

You're the best ........ thanks a lot Milke for this tutorial

[@HeyFlutter]

You’re most welcome, Yasmeen Abu shaar! 🙂

[@farhanahmad-bv1mx]

Awesome👏👍

[@gersonchadijunior7499]

Man you saved my life ! Thank you ! You have a new follower

[@HeyFlutter]

Glad I could be of help, Thank you gerson chadi! 😊

[@danielekpenyong5930]

love your videos man keep it up

[@HeyFlutter]

Thank you, Daniel Ekpenyong! 🙂

[@TrikNgonlen]

that's great, @Johannes Milke ...

[@meetamin7343]

Thanks🙏🙏

[@JobinJacobKavalam]

Thank you. I found out how a parent widget can call methods in it's child's state.

[@piattidjoka8946]

Thanks you sir

[@NurulIslam-dw8yp]

Thanks

[@CodeWhizbang]

Thanks.

[@abdulrehman-ws9wl]

Great Explanation...Thank you

[@abdulrehman-ws9wl]

@@HeyFlutter Have you create video on other type of keys in flutter like : unique key, Value key etc.?

[@arnaudduquenoy2061]

So clear when you explain :) You should have been my math teacher when i was young :))

[@arnaudduquenoy2061]

I returned today on the Global Key series. These kind of specialized tutos are very usefull compared to so many basic Dart tutos that you can find on the internet. A lot of people are trying to find advanced tutos on Dart but the majority of them are so Basic compared to these kind of tuto

[@HeyFlutter]

Awesome, thanks a lot, Arnaud! 🙂 Yeah, I try my best so that people don't say the same about Flutter in the future 😉

[@kingbheem640]

Can you pls explain how to create multiple enddrawer in a single same page with different content

[@meetrajpopat2348]

one question brother my local app notification(not the firebase but native) is not working when app is terminated what to do(i already watched your old videos)? can you please make video on that?
and also make video on native ad which uses the latest package from google ad, old one is deprecated and i lost where the part to write native code inside manifest file there is some errors regarding package and also note that i also used fluuter_native_ads package but due to new firebase firestore package i got error while building i will be very thankful if you help me out, btw love your content

[@usmanshoaib2099]

I am receiving GlobalKey current state null ?? I have tried for variable and function both but getting null value.

[@njomaboujaib4995]

Great and clear content as always

[@njomaboujaib4995]

@@HeyFlutter it worked :D thanks for the explanation and quick answer :) you are the best

[@HeyFlutter]

Thanks, Njm! 🙂 Sure good question, first of all you need to check if you can access the state of your GlobalKey by checking if keyCounter.currentState != null. Only if the currentState exists then you could access the state & logic of your StatefulWidget with the help of your GlobalKey. Check out the example below where we display the counter within the AppBar Title:
import 'package:flutter/material.dart';
class BasicKeyPage extends StatefulWidget {
@override
_BasicKeyPageState createState() => _BasicKeyPageState();
}
class _BasicKeyPageState extends State {
final keyCounter = GlobalKey();
@override
Widget build(BuildContext context) {
final counter = keyCounter.currentState == null
? '0'
: keyCounter.currentState!.counter;
return Scaffold(
appBar: AppBar(
title: Text('My Counter: $counter'),
centerTitle: true,
),
body: Center(
child: CounterWidget(key: keyCounter),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => setState(() => keyCounter.currentState!.increment()),
),
);
}
}
class CounterWidget extends StatefulWidget {
const CounterWidget({Key? key}) : super(key: key);
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State {
int counter = 0;
void increment() => setState(() => counter += 5);
@override
Widget build(BuildContext context) => Text(
'Counter: $counter',
style: TextStyle(fontSize: 32),
);
}

[@kasandrop]

thanks for it I prefer to read the subtitles though.

[@Wick__op]

Nice

[@HeyFlutter]

Thank you, blacky arinova! 🙂

[@vaibhavdangayachvd]

Why not use provider?

[@piyushbhatnagar4735]

Which key we have to use with Stateless Widget

[@HeyFlutter]

Thank You @piyushbhatnagar4735! Follow this link: stackoverflow.com/questions/50080860/what-are-keys-in-the-stateless-widgets-class
I hope you will get your answer 🙂

[@spinoff2011]

And what happen with the explanation of the plain keys (not the global)? :s

[@congtoannguyen1940]

How do I dispose a TextFormField correctly with this global Form and can I (or should I ) dispose the Global Form Key too if so then how

[@HeyFlutter]

Thank You Cong Toan Nguyen! Follow this link: stackoverflow.com/questions/68095494/why-did-if-statement-dispose-textformfield-in-flutter
I hope you will get your answer 🙂

[@immunemart484]

How to make the height of the cursor same with the height of text in UITextField?

[@immunemart484]

@@HeyFlutter i know but i have many doubts, so i comment on ur latest video so that u give me attantion.

[@HeyFlutter]

Thanks, Mart! 🙂 This seems to be unrelated to the concept of Global Keys. Learn more about TextFields here: th-cam.com/video/C5hJIKCTrvk/w-d-xo.html

[@fluffycatstream6196]

Hi, How to access GlobalKey to another flutter page / file? another people asked this 6 months ago and you give a very outdated way. please tell me properly I really need this thank you.

[@fluffycatstream6196]

@@HeyFlutter this does not work sir, this is a different topic

[@theghost6606]

I dont understand why we use keys. In this example we used the key to access the methods and variables. But this is also possible with Classname.variable isnt it ?

[@theghost6606]

@@HeyFlutter Thank you. Now i understand. Great Video!

[@HeyFlutter]

Thanks, The Ghost! 🙂 The first example was only a very simple demonstration to showcase how Global Keys work, however, you are right this should not be used in your apps because you could also pass the counter variable directly down from the parent to the child widget without using GlobalKeys. The second example at 4:17 is a real example that makes more sense to use since the widget is from the Flutter SDK and we have no direct control over it however with the help of Global Keys we can access this external widget - its state and also its logic.
Global Keys should be mainly used to access logic & state of EXTERNAL Source Codes such as packages & the Flutter SDK, as demonstrated at 4:17. If you write your own widgets prefer to use StatelessWidgets & write your logic with a State Management, then you don't need to care about Global Keys anymore. Check also my tutorials out about State Management here:
1. Riverpod Basics Providers Tutorial: th-cam.com/video/8H3bwxxla4Y/w-d-xo.html
2. Riverpod Basics Notifiers Tutorial: th-cam.com/video/vD-I1ARIMnk/w-d-xo.html
3. Riverpod Basics Modifiers Tutorial: th-cam.com/video/7h2BrtK8Bpg/w-d-xo.html
4. Riverpod & Calculator UI Tutorial: th-cam.com/video/6isW26d9TiE/w-d-xo.html
5. Provider Tutorial: th-cam.com/video/cltCpXY60Sk/w-d-xo.html
6. Provider & Firebase Tutorial: th-cam.com/video/EV2DyrKOqrY/w-d-xo.html

[@eNONO-ot4zh]

in my projet i have this error:
Looking up a deactivated widget's ancestor is unsafe.
I try to folloz your course but i have a error like:
"'dynamic' doesn't conform to the bound 'State' of the type parameter 'T'.
Try using a type that is or is a subclass of 'State'."
and
"The name '_SalerListViewAnnounceWidgetState' isn't a type so it can't be used as a type argument.
Try correcting the name to an existing type, or defining a type named '_SalerListViewAnnounceWidgetState'."

[@HeyFlutter]

Thank you, e.NONO! 🙂 Make sure wherever you are using navigator.pop() must have atleast one screen availabe on stack

[@robertmrobo8954]

Hi Milke,
How do I access the global key defined in a different dart file?

[@fabioburkard]

@@HeyFlutter Excellent tutorial, Johannes! If you know any (recent) solution using GlobalKey, pls share... I don't know why, but some old codes don't work anymore, using GlobalKey's inside different files.

[@HeyFlutter]

Thank you, Robert Mrobo! You could learn more about this problem here : stackoverflow.com/a/29182641

[@Tech1st]

Why r u using keys?

[@HeyFlutter]

Thanks, Tech1st! 🙂 In this video, we were focused on Global Keys. With a Global Key, you can access the state of Stateful Widgets. Therefore a Global Key can be useful to access the state & logic of other widgets as demonstrated at 7:32 Especially the Flutter SDK uses this technique to implement some logic within their Stateful Widgets which you can then access over a GlobalKey. All in all, it is mainly used to access the logic of StatefulWidgets that were created for you within the Flutter SDK or within other Flutter packages.

[@shubhamjaitapkar3359]

if you make the class in different you won't be able to access the key!!