What is initState and super.initState In Flutter?

In Flutter, initState is a inital / beginning method of StatefulWidget.

“This method is invoked only once during the widget’s lifecycle”, It execute when page open or screen load. It means when you open StatefulWidget based screen there is initial value allocation to variables or method calling, whatever we mentioned inside initState method first allocated values and then the screen opens.

@override
  void initState() { // initState
  //Calling superclass (State) 
    super.initState();

    // Initialization counter value 42
    counter = 42;
    print('initState called');

//method Calling at initial level
testMethod();
  }

It’s a common practice to call super.initState() within this method to ensure that the initialization of the state is properly handled by the superclass (State) or parent class

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  // Declare variable
  int counter = 0;

@override
  void initState() {
  //Calling superclass (State) 
    super.initState();

    // Initialization counter value 42
    counter = 42;
    print('initState called');

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ResearchThinker initState Example'),
      ),
      body: Center(
//Counter value will be 42 because we mentioned 42 inside init State
        child: Text('Counter: $counter',style: TextStyle(fontSize:35,fontWeight:FontWeight.bold,
            color: Colors.black),),
      ),
    );
  }
}

Similarly, if we use variables in the build method of a Stateful widget, and the values of those variables depend on an API or specific methods, we declare the API function or method inside initState. This ensures that the API or specific method loads first, followed by the build method.

In this example we are using method which execute first and then build state

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  // Declare a variable
  int counter = 0;

  @override
  void initState() {
    super.initState();
    // Initialize counter value
    incrementCounter(21);
    print('initState called with counter: $counter');
  }

  // Simple method to add value to the counter
  void incrementCounter(int value) {
    setState(() {
      counter=value+value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ResearchThinker Counter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
/// Here counter value will 42 due to increment function execute in intiState
            Text(
              'Counter: $counter',
              style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold, color: Colors.black),
            ),
            SizedBox(height: 20),
       
          ],
        ),
      ),
    );
  }
}