pass a variable from a statefull widget to state - flutter

Question

i try to pass a variable "int counter = 0;" in a state widget ,but i don't know why i can't retrieve it , the App return me as "Null", I passed all the variables into the constructor though , (class MyHomePage extends StatefulWidget).
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title, this.counter}) : super(key: key);
final String title;
int counter= 0;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _incrementCounter() {
setState(() {
widget.counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${widget.counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Thank you for your help

Answer 1

Widgets (including StatefulWidgets) should always be immutable, should not change over their lifetime. In fact, you should see a warning if you try to add a non-final variable to the StatefulWidget, since it is a subtype of Widget, which has the #immutable annotation.
It is very rare that any logic actually takes place inside a StatefulWidget subclass. Instead, all the state and associated logic should be in the State class.
You should move counter into the state class like this:
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key key, this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int counter = 0;
void _incrementCounter() {
setState(() {
counter++;
});
}
// the rest is the same, except using counter instead of widget.counter
}

Answer 2

Lets first analyze code
home: MyHomePage(title: 'Flutter Demo Home Page'),
// You did not pass integer to the counter field, dart pass null to counter field
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title, this.counter
/* here null will be initialized to the counter field */
}) : super(key: key);
final String title;
int counter= 0; // now it is null
#override
_MyHomePageState createState() => _MyHomePageState();
}
So for this reason you get null
How to correctly pass in your scenario:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title, this.counter=0}) : super(key: key);
final String title;
int counter;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _incrementCounter() {
setState(() {
widget.counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${widget.counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}