Flutter access Widget variable in another widget - flutter

Question

I can not get it done to access a simple property of a stateless widget from another widget...
Class Month:
class Month {
final String name;
const Month(this.name);
}
MonthCardWidget:
class MonthCardWidget extends StatelessWidget {
final Month month;
const MonthCardWidget({Key key, this.month}) : super(key: key);
...
in my Stateful widget:
final List months = [
MonthCardWidget(month: Month('January')),
MonthCardWidget(month: Month('February')),
MonthCardWidget(month: Month('March')),
MonthCardWidget(month: Month('April')),
MonthCardWidget(month: Month('May')),
MonthCardWidget(month: Month('Juni')),
MonthCardWidget(month: Month('Juli')),
MonthCardWidget(month: Month('August')),
MonthCardWidget(month: Month('September')),
MonthCardWidget(month: Month('October')),
MonthCardWidget(month: Month('November')),
MonthCardWidget(month: Month('December')),
];
and I try to access the name like this:
months[index].month.name
but this is not working... What am I missing here?

Answer 1

Would it not be easier to make a list of Month models instead of widgets?

Answer 2

I think what you want is a state management solution. For this you can use packages like provider or GetX. My personal favorite is the GetX Package. You just need to create a class where you put your lists,variables,... you want to access globally and then call them with a controller.
For a detailed documentation check out their package on pub.dev
https://pub.dev/packages/get
Good Luck! :)

Answer 3

It's probably a bad idea to access the properties of the Widget from its ancestor. The data flows in the other direction. Using State Management is a great way to manage/share your data around your Widget Tree. Check this curated list of State Management Packages. My personal favorite is Riverpod (a new package from the same author as the Provider package).
For your particular case, I'm not even sure you need a Month class and a List<MonthCardWidget> months. Months are just numbers from 1 to 12.
The children of your wheel can be generated as a List:
ClickableListWheelScrollView(
[...]
child: ListWheelScrollView(
[...]
children: List.generate(12, (index) => MonthCardWidget(month: index + 1)),
),
);
And then, your MonthCardWidget just receives an int month and displays the month name thanks to the intl package, giving you i18n for free:
class MonthCardWidget extends StatelessWidget {
final int month;
const MonthCardWidget({Key key, this.month}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.amber.shade300,
child: Center(
child: Text(DateFormat.MMMM().format(DateTime(2000, month))),
),
);
}
}
Full source code
import 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calendar Wheel Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: MyListWheel(),
);
}
}
class MyListWheel extends StatefulWidget {
#override
_MyListWheelState createState() => _MyListWheelState();
}
class _MyListWheelState extends State {
final _scrollController = FixedExtentScrollController(initialItem: 11);
#override
Widget build(BuildContext context) {
final double _itemHeight = MediaQuery.of(context).size.height / 3;
return ClickableListWheelScrollView(
scrollController: _scrollController,
itemHeight: _itemHeight,
itemCount: 12,
scrollOnTap: true,
child: ListWheelScrollView(
controller: _scrollController,
itemExtent: _itemHeight,
physics: FixedExtentScrollPhysics(),
diameterRatio: 3,
squeeze: 0.95,
children:
List.generate(12, (index) => MonthCardWidget(month: index + 1)),
),
);
}
}
class MonthCardWidget extends StatelessWidget {
final int month;
const MonthCardWidget({Key key, this.month}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.amber.shade300,
child: Center(
child: Text(DateFormat.MMMM().format(DateTime(2000, month))),
),
);
}
}