Summary - StatefulWidget

Combine StatefulWidget, setState and initState to build a counter.

StatefulWidget summary

StatefulWidget is used for interfaces that change over time. createState produces a State object; this State holds the variable data. setState triggers build again after the data is updated. You set up resources in initState and clean them up in dispose. Combining the four lets you build a working counter.

class Sayac extends StatefulWidget {
  const Sayac({super.key});
  @override
  State<Sayac> createState() => _SayacState();
}

class _SayacState extends State<Sayac> {
  int deger = 0;

  @override
  void initState() {
    super.initState();
    deger = 0;
  }

  void artir() {
    setState(() => deger++);
  }

  @override
  Widget build(BuildContext context) {
    return Text('$deger');
  }
}

Exercise Write the Sayac class and run

First print print('sayac hazir'), then call runApp(MaterialApp(home: Sayac())). Define a Sayac class extending StatefulWidget that produces _SayacState via createState. _SayacState should extend State<Sayac>, hold int deger = 0, call super.initState() in initState, call setState in artir, and return Text('$deger') from build.

Show example solution

import 'package:flutter/material.dart';

void main() {
  print('sayac hazir');
  runApp(MaterialApp(home: Sayac()));
}

class Sayac extends StatefulWidget {
  const Sayac({super.key});
  @override
  State<Sayac> createState() => _SayacState();
}

class _SayacState extends State<Sayac> {
  int deger = 0;

  @override
  void initState() {
    super.initState();
  }

  void artir() {
    setState(() => deger++);
  }

  @override
  Widget build(BuildContext context) {
    return Text('$deger');
  }
}

Test yourself

Which widget type is used for a counter widget?
- InheritedWidget
- Builder widget
- StatelessWidget
- StatefulWidget
Show answer

StatefulWidget — A counter holds data that changes over time, so it is written with StatefulWidget; StatelessWidget cannot hold state.

Stateful class definition

class Sayac extends ____ {
  const Sayac({super.key});
  @override
  State&lt;Sayac&gt; createState() =&gt; _SayacState();
}

Show answer

class Sayac extends StatefulWidget {
  const Sayac({super.key});
  @override
  State&lt;Sayac&gt; createState() =&gt; _SayacState();
}

StatefulWidget combined

Sayaç

Written with StatefulWidget
artir metodu

Calls setState
deger alanı

Stored in State
initState/dispose

Lifecycle pair

Next lesson: The Text widget

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies