Flutter / Dart: StatefulWidget - access class variable inside Widget - flutter

I declare a class variable for a StatefulWidget - in the code below it's someString.
Is it possible to use this variable in the build(…)-method without declaring it as static?
class MyClass extends StatefulWidget {
String someString;
MyClass() {
this.someString = "foo";
}
#override
_MyClassState createState() => _MyClassState();
}
class _MyClassState extends State<MyClass> {
_MyClassState();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("someString - how to access it here?!"),
// title: Text(someString), is not possible, obviously
),
);
}
}
Thanks in advance for help!

Attention: MyClass should be immutable.
1. If someString will never change
Keep it inside MyClass but define it as final.
class MyClass extends StatefulWidget {
final String someString;
const MyClass({Key key, this.someString = 'foo'}) : super(key: key);
#override
_MyClassState createState() => _MyClassState();
}
Then, inside the State, you can use it as widget.someString:
class _MyClassState extends State<MyClass> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('${widget.someString} is accessed here?!')),
);
}
}
2. If someString will change
It should be defined in the state.
class MyClass extends StatefulWidget {
final String initialValue;
const MyClass({Key key, this.initialValue = 'foo'}) : super(key: key);
#override
_MyClassState createState() => _MyClassState();
}
class _MyClassState extends State<MyClass> {
String someString;
#override
void initState() {
someString = widget.initialValue;
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('$someString is accessed here?!')),
body: Center(
child: OutlinedButton(
onPressed: () => setState(() => someString = 'NEW Value'),
child: Text('Update value'),
),
),
);
}
}

Related

How to send arguments in restorablePush? (flutter)

The flutter docs on restorablePush says that "Any object that is serializable via the StandardMessageCodec can be passed as arguments. Often, a Map is used to pass key-value pairs." But I am struggling to do this, as the route builder needs to be static.
I've made a small example below that illustrates the problem - basically, I want to be able to pass title as an argument from Screen1 to Screen2 and display it in the AppBar. Not sure where and how to put the argument in.
class Screen1 extends StatefulWidget {
const Screen1({Key? key}) : super(key: key);
#override
State<Screen1> createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
String title = 'blah';
static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
return MaterialPageRoute<void>(
builder: (BuildContext context) => const Screen2(),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () {
Navigator.restorablePush(context, _myRouteBuilder);
// Put somewhere... arguments: {'appBarTitle': title}
},
child: const Text('Go to Screen 2')),
),
);
}
}
class Screen2 extends StatefulWidget {
const Screen2({Key? key}) : super(key: key);
#override
State<Screen2> createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
String _string = '';
#override
Widget build(BuildContext context) {
final args =
ModalRoute.of(context)!.settings.arguments as Map<String, String>;
_string = args['appBarTitle'] ?? 'error';
return Scaffold(
appBar: AppBar(title: Text(_string)),
);
}
}
You need to add the settings parameter to MaterialPageRoute so that ModalRoute receives the argument on screen 2.
class Screen1 extends StatefulWidget {
const Screen1({Key? key}) : super(key: key);
#override
State<Screen1> createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
String title = 'blah';
static Route<void> _myRouteBuilder(BuildContext context, Object? arguments) {
return MaterialPageRoute<void>(
settings: RouteSettings(name: '/screen2', arguments: arguments),
builder: (BuildContext context) => const Screen2(),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () {
Navigator.restorablePush(context, _myRouteBuilder, arguments: {'appBarTitle': title});
// Put somewhere... arguments: {'appBarTitle': title}
},
child: const Text('Go to Screen 2')),
),
);
}
}
class Screen2 extends StatefulWidget {
const Screen2({Key? key}) : super(key: key);
#override
State<Screen2> createState() => _Screen2State();
}
class _Screen2State extends State<Screen2> {
String _string = 'Test';
#override
Widget build(BuildContext context) {
final args =
ModalRoute.of(context)?.settings.arguments;
if(args is Map){
_string = args['appBarTitle'] ?? 'error';
}
return Scaffold(
appBar: AppBar(title: Text(_string)),
);
}
}

How to use get_it for Provider.of<ExampleProvider>(context)?

I am new to flutter and I am trying to use get_it package for DI. I want to understand how can I replace my dependance on the Inherited Widget with get_it.
My code looks like this:
I have a locator file which initialises the locator instance and its setup.
locator.dart file:
final locator = GetIt.instance;
void setupLocator() {
locator.registerLazySingleton<ExampleProvider>(() => ExampleProvider());
}
example_provider.dart:
class ExampleProvider with ChangeNotifier {
bool _value = false;
bool get value => _value;
set setValue(bool newValue) {
_value = newValue;
notifyListeners();
}
}
This is the HomePage where provide the ChangeNotifierProvider with ExampleProvider to the child widget.
home_page.dart file:
class HomePage extends StatefulWidget {
final String title;
const HomePage({Key? key, required this.title}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _exampleProvider = locator.get<ExampleProvider>();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
key: Key('issue_list_screen_column'),
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ChangeNotifierProvider(
create: (context) => _exampleProvider,
child: ExampleWidget(
key: Key('example_widget'),
),
),
],
),
appBar: AppBar(
title: Text(widget.title),
),
);
}
}
This is the ExampleWidget where I want to use the locator instead of Provider.of<ExampleProvider>(context)
example_widget.dart file:
class ExampleWidget extends StatefulWidget {
const ExampleWidget({
Key? key,
}) : super(key: key);
#override
_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {
#override
Widget build(BuildContext context) {
// How do I use locator over here with context??
final _exampleProvider = Provider.of<ExampleProvider>(context);
return Switch(
value: _exampleProvider.value,
onChanged: (newValue) {
themeProvider.setValue = newValue;
},
);
}
}
So, I want to use locator for the line final _exampleProvider = Provider.of<ExampleProvider>(context); in ExampleWidget. How can I do that?
It does not work like this: final _exampleProvider = locator.get<ExampleProvider>();
try this
final _exampleProvider = locator.get<ExampleProvider>();

How to Set/Update State of StatefulWidget from other StatefulWidget in stack Flutter?

am using something like that
class OpenPage extends StatefulWidget {
#override
_OpenPageState createState() => _OpenPageState();
}
class _OpenPageState extends State<OpenPage> {
int id= 0;
}
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
classOne(), //id changed here
classTwo(), //here data depends on id
],
);
}
where classOne and classTwo are StatefulWidget .
what am tring to do when i change id value in classOne i want it to change the classTwo where the data in the classTwo depends on the id that change in classOne .
how could i setState classTwo when the id in classOne change ?
You could pass the function of manipulating the id as an argument of WidgetOne. In this example WidgetOne and WidgetTwo are StatelessWidget but it should also work for StatelessWidget
class OpenPage extends StatefulWidget {
#override
_OpenPage createState() => _OpenPage();
}
class _OpenPage extends State<OpenPage > {
int id = 0;
#override
Widget build(BuildContext context) {
return Stack(
children: [
WidgetOne(
onPressed: () {
setState(() {
id++;
});
},
),
WidgetTwo(
id: id,
),
],
);
}
}
class WidgetOne extends StatelessWidget {
final VoidCallback onPressed;
const WidgetOne({Key key, this.onPressed}) : super(key: key);
#override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.add),
onPressed: onPressed,
);
}
}
class WidgetTwo extends StatelessWidget {
final int id;
const WidgetTwo({Key key, this.id}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(id.toString());
}
}

How to redraw StatefulWidget

On the example below, since MyStatefulWidget has a state, it doesn't matter if setState is called on _MyAppState, because it will not be redrawn.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
int value = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('App Example')),
body: Row(children:[
MyStatefulWidget(title: value.toString()),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
onPressed: (){setState(() { value+=1; });},
child: new Text("Add"),
)
]),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key, this.title}):super(key: key);
final String title;
#override
State<StatefulWidget> createState() {
return _MyStatefulWidgetState();
}
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String title;
#override
void initState() {
super.initState();
if (widget.title!=null) {
title = widget.title;
} else {
title = "";
}
}
int value = 0;
#override
Widget build(BuildContext context) {
return Text(title);
}
}
If I used a StatelessWidget it'd be redrawn, but this is just an example, there are cases where I need to redraw a StatefulWidget when setState is called.
One option would be to give it a name and build it from the setState, but I need it to be draw in the place where it's draw right now.
Dartpad: https://dartpad.dev/968be8755d5deab1ca5c8c84a993eafc
You could directly use widget.title in the Text widget to update the counter on screen. Please see the code below :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
void changeVal(int val) {
setState(() {
value = val;
});
}
int value = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('App Example')),
body: Row(children: [
MyStatefulWidget(
title: value.toString(),
groupValue: value % 10,
chnageVal: changeVal),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
setState(() {
value += 1;
});
},
child: const Text("Add"),
)
]),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key key, this.title, this.groupValue, this.chnageVal})
: super(key: key);
final String title;
final int groupValue;
final Function(int) chnageVal;
#override
State<StatefulWidget> createState() {
return _MyStatefulWidgetState();
}
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
//String title;
// #override
// void initState() {
// super.initState();
// if (widget.title!=null) {
// title = widget.title;
// } else {
// title = "";
// }
// }
//int value = 0;
List<int> numbers = List.generate(10, (index) => index);
#override
Widget build(BuildContext context) {
return Container(
width: 120,
child: Column(children: [
Text(widget.title),
...numbers
.map((number) => RadioListTile<int>(
title: Text('$number'),
value: number,
groupValue: widget.groupValue,
onChanged: (val) {
widget.chnageVal(val);
},
))
.toList()
]),
);
}
}
Just provide a unique key while calling MyStatefulWidget like MyStatefulWidget(key: UniqueKey(), title: value.toString()),.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
int value = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('App Example')),
body: Row(children: [
MyStatefulWidget(key: UniqueKey(), title: value.toString()),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
setState(() {
value += 1;
});
},
child: new Text("Add"),
)
]),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key, this.title}) : super(key: key);
final String title;
#override
State<StatefulWidget> createState() {
return _MyStatefulWidgetState();
}
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String title;
#override
void initState() {
super.initState();
if (widget.title != null) {
title = widget.title;
} else {
title = "";
}
}
int value = 0;
#override
Widget build(BuildContext context) {
return Text(title);
}
}
To know more about key please go through this article.
I will recommend using Stream, better performance and not so hard to use for refresh partial UI.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
StreamController<int> _streamController = StreamController();
int value = 0;
#override
void dispose() {
_streamController.close();
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home:
StreamBuilder<int>(
stream: _streamController.stream,
initialData: value,
builder:
(BuildContext context, AsyncSnapshot<int> snapshot) {
return Scaffold(
appBar: AppBar(title: Text('App Example')),
body: Row(children:[
MyStatefulWidget(title: value.toString()),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
onPressed: (){_streamController.sink.add(value++);},
child: new Text("Add"),
)
]),
);},),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key, this.title}):super(key: key);
final String title;
#override
State<StatefulWidget> createState() {
return _MyStatefulWidgetState();
}
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
String title;
#override
void initState() {
super.initState();
if (widget.title!=null) {
title = widget.title;
} else {
title = "";
}
}
int value = 0;
#override
Widget build(BuildContext context) {
return Text(title);
}
}

How to call setState or update value in InheritedWidget?

Reproducible Code:
void main() => runApp(MaterialApp(home: CountInheritedWidget(child: HomePage())));
class CountInheritedWidget extends InheritedWidget {
CountInheritedWidget({Widget child}) : super(child: child);
final Map<String, int> _map = {"count": 0};
// getter
int get value => _map["count"];
// setter
set value(int x) => _map["count"] = x; // is there anything like setState here?
#override
bool updateShouldNotify(CountInheritedWidget oldCounter) => true;
static CountInheritedWidget of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>();
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextWidget(),
ButtonWidget(),
],
),
),
);
}
}
class TextWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
int count = CountInheritedWidget.of(context)?.value ?? -1;
return Text("Count = $count");
}
}
class ButtonWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text("Increment"),
onPressed: () {
CountInheritedWidget counter = CountInheritedWidget.of(context);
int count = counter?.value ?? -1;
counter.value = ++count;
},
);
}
}
I'd like to update the value of count from ButtonWidget, I am sure it is getting updated in the CounterInheritedWidget class but it isn't reflecting on the screen. How can I call setState or something like that from InheritedWidget?
Any help will be appreciated, I am newbie to Flutter and Dart so having tough time in solving this kind of issue. Thank you and have a great day.
Note: I am not looking for some plugins like Provider, ScopedModel, Redux for this kinda work.
InheritedWidgets cannot do that. They are completely immutable with no mechanism for triggering updates.
If you want to emit updates, you will have to combine your InheritedWidget with a StatefulWidget, typically done in such way:
class MyWidget extends StatefulWidget {
const MyWidget({Key key, this.child}) : super(key: key);
final Widget child;
#override
MyState createState() => MyState();
}
class MyState extends State<MyWidget> {
String name;
int age;
#override
Widget build(BuildContext context) {
return MyInherited(
name: name,
age: age,
child: widget.child,
);
}
}
Where MyInheritedWidget is:
class MyInherited extends InheritedWidget {
MyInherited({
Key key,
this.name,
this.age,
Widget child,
}) : super(key: key, child: child);
final String name;
final int age;
#override
bool updateShouldNotify(MyInherited oldWidget) {
return name != oldWidget.name && age != oldWidget.age;
}
#override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(IntProperty('age', age));
properties.add(StringProperty('name', name));
}
}
Yup. That's verbose. Which is why provider exists.
Here is a complete example:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyStateful(
child: Column(
children: <Widget>[
MyCounter(),
MyButton(),
],
),
),
),
);
}
}
// MyStateful and MyInherited together act like a Provider
class MyStateful extends StatefulWidget {
const MyStateful({Key? key, required this.child}) : super(key: key);
final Widget child;
#override
MyState createState() => MyState();
}
class MyState extends State<MyStateful> {
int _count = 0;
void increment() {
setState(() {
_count += 1;
});
}
#override
Widget build(BuildContext context) {
return MyInherited(
count: _count,
increment: this.increment,
child: widget.child,
);
}
}
// Whenever state values are changes a new MyInherited is created
// with new parameters.
class MyInherited extends InheritedWidget {
MyInherited({
Key? key,
required this.count,
required this.increment,
required Widget child,
}) : super(key: key, child: child);
final int count;
final void Function() increment;
#override
bool updateShouldNotify(MyInherited oldWidget) {
return count != oldWidget.count;
}
static MyInherited of(BuildContext context) {
final MyInherited? result =
context.dependOnInheritedWidgetOfExactType<MyInherited>();
assert(result != null, 'No MyInherited found in context');
return result!;
}
}
class MyCounter extends StatelessWidget {
const MyCounter({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text('Count: ${MyInherited.of(context).count}');
}
}
class MyButton extends StatelessWidget {
const MyButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
MyInherited.of(context).increment();
},
child: const Text('Increment'),
);
}
}