Flutter access Widget variable in another widget

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))),
      ),
    );
  }
}