Widget is null inside initState - flutter

It's the first time a use Flutter (2.8.1) and I'having problems trying to undestrand what's going wrong.
I have a Stateful widget like this:
class SimpleWidget extends StatefulWidget {
final Type2 aValue;
const SimpleWidget({Key key, #required this.aValue}) : super(key: key);
#override
_SimpleWidgetState createState() => _SimpleWidgetState();
}
class _SimpleWidgetState extends State<SimpleWidget> {
Type1 color;
#override
void initState() {
super.initState();
color = widget.aValue; // <-- widget is null
}
...
}
that I call in this way:
List<Type1> something = await showDialog(
context: context,
builder: (context) {
print('currentElement.aValue: ${currentElement.aValue}'); // not null
return SimpleWidget(aValue: currentElement.aValue);
},
);
Why is widget.aValue == null in initState()? How can I solve it?

There are some error in your coding;
The first one is construction of SimpleWidget
const SimpleWidget({Key key, #required this.aValue}) : super(key: key);
when you call like SimpleWidget(aValue: currentElement.aValue); It will should error like key can not be null. You can use ? to make it nullable. Also, # should be remove, it is a syntax error
The correct one looks like
const SimpleWidget({Key? key, required this.aValue}) : super(key: key);
The second one is in SimpleWidgetState
You can change Type1 color; to late Type1 color;
Or make it nullable.
For more details, you can check flutter codelabs

Related

How to set default value of function in a constructor (Flutter)

I want to set default function in my child Widget in a constructor.
Basically, I have two widgets
Login (Parent Widget)
AppButton (Child Widget)
Here is my AppButton.dart
And I am calling this child widget in Login.dart (Parent) like this:
AppButton(title: "Login")
Please give me a way that to set default function without making "onPress" required for it's Parent (Login.dart)
TIA
Only static value can be set as default value in constructor, so you need define you function as static like this:
class AppButton extends StatefulWidget {
final Function onPress;
const AppButton({Key? key, this.onPress = _onPress}) : super(key: key);
static void _onPress(){}
#override
State<AppButton> createState() => _AppButtonState();
}
just make it nullable:
class MyButton extends StatefulWidget {
final void Function()? onPress;
final String title;
const MyButton({Key? key, this.onPress, required this.title}) : super(key: key);
#override
State<MyButton> createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
void Function() defaultOnPress = (){
// your default function here
};
#override
Widget build(BuildContext context) {
return ElevatedButton(onPressed: widget.onPress ?? defaultOnPress, child: const Text("my button"));
}
}
still you can get const constructor
you could put "static" before childOnPress()

How to make ValueListenableBuilder build based on a condition from UI

I have multiple ActivityButton widgets that listen to same ValueNotifier.
class ActivityButton extends StatelessWidget {
const ActivityButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ValueListenableBuilder<ActivityButtonState>(
valueListenable: someModel.activityButtonStateNotifier,
builder: (_, state, __) {
return _buildContent(state);
});
}
Widget _buildContent(ActivityButtonState state) { ... }
}
I use ActivityButtonState as value for ValueNotifier.
class ActivityButtonState {
ActivityButtonState({required this.id, required this.text});
final String id;
final String text;
}
I want to scope the updates from ValueNotifier to be given to related ValueListenebleBuilder only by using id from ActivityButtonState. So, I updated constructor for ActivityButton like this:
const ActivityButton({Key? key, required this.scopeId}) : super(key: key);
final String scopeId;
Now, I don't know how to prevent rebuilds in ValueListenableBuilder if id from ActivityButtonState doesn't match scopeId in ActivityButton.
I have used Selector from provider package before. I need something similar so that build is triggered only if id matches.
Any help or alternatives appreciated.

Null value in Flutter widget inside initState method

It's the first time a use Flutter (2.8.1) and I'having problems trying to undestrand what's going wrong.
I have a Stateful widget like this:
class SimpleWidget extends StatefulWidget {
const SimpleWidget({Key key, #required this.aValue}) : super(key: key);
final Type2 aValue;
#override
_SimpleWidgetState createState() => _SimpleWidgetState();
}
class _SimpleWidgetState extends State<SimpleWidget> {
Type1 from;
Type1 to;
#override
void initState() {
print('mounted: $mounted'); // true
print('widget.aValue: ${widget.aValue}'); // null <-- WHY IS THIS NULL?
super.initState();
from = ...;
to = ...;
}
...
}
that I call in this way:
List<Type1> breakTimes = await showDialog(
context: context,
builder: (context) {
print('currentElement.aValue: ${currentElement.aValue}'); // not null
return SimpleWidget(aValue: currentElement.aValue);
},
);
Why is widget.aValue == null in initInstance()? How can I solve it?
There is wrong in your code :
Chane this to this:
class SimpleWidget extends StatefulWidget {
final Type2 aValue; // initialize 1st
const SimpleWidget({Key key, #required this.aValue}) : super(key: key);
#override
_SimpleWidgetState createState() => _SimpleWidgetState();
}

Pass to Widget a Function that returns a future

I want to pass to my Widget a function that returns a future:
class CircularButtonWithIcon extends StatefulWidget {
CircularButtonWithIcon(
{Key key,
#required this.onPress,
this.activeStatus})
: super(key: key);
final Function activeStatus;
class _CircularButtonWithIconState extends State<CircularButtonWithIcon> {
bool active;
#override
void initState() {
super.initState();
widget.activeStatus.then(...);
}
However Dart's class Function has no way to specify that the function's return type.
Is it possible to do such thing?
You can add the return type front of the Function
i.e.
class CircularButtonWithIcon extends StatefulWidget {
Future<void> Function() activeStatus;
CircularButtonWithIcon({Key key, #required this.onPress, this.activeStatus,}) : super(key: key);
}

How does flutter VSCode snippets to extract widget work?

When I use VSCode snippet Extract Widget, I have the following :
class MyExtractedWidget extends StatelessWidget {
const MyExtractedWidget({
Key key,
#required T someVariable,
}) : _someVariable = someVariable,
super(key: key);
final T _someVariable;
#override
Widget build(BuildContext context){ return Container(); }
}
However, I am used to write constructors the following way :
class MyExtractedWidget extends StatelessWidget {
const MyExtractedWidget({
Key key,
#required this.someVariable, // Directly accessing variable using "this"
}) : super(key: key);
final T someVariable;
#override
Widget build(BuildContext context){ return Container(); }
}
Do you know why snippets' constructors use a temporary variable instead of directly writing in the variable?
Is it related to encapsulation? If yes, I cannot understand why, as an extracted Widget is written in the same file, and that "underscored" variables are accessible in whole file.
EDIT
I tried with another widget and I have a kind of mix :
class Test extends StatelessWidget {
const Test({
Key key,
#required List<SortedExpense> sortedExpenses,
#required this.expensesSink,
}) : _sortedExpenses = sortedExpenses, super(key: key);
final List<SortedExpense> _sortedExpenses;
final StreamSink<List<Expense>> expensesSink;
...
This is based on the privacy of the variables you're extracting.
For example, the following widget:
Text(_count.toString())
will generate:
class MyName extends StatelessWidget {
const MyName({
Key key,
#required int count,
}) : _count = count, super(key: key);
final int _count;
#override
Widget build(BuildContext context) {
return Text(_count.toString());
}
}
while this widget:
Text(count.toString())
will create:
class MyName extends StatelessWidget {
const MyName({
Key key,
#required this.count,
}) : super(key: key);
final int count;
#override
Widget build(BuildContext context) {
return Text(count.toString());
}
}