I can't get the state of my Stateful widget to display the updated month on the ElevatedButton with ListWheelScrollView.useDelegate()

Question

import 'package:flutter/material.dart';
import 'year_month_picker/states_month.dart';

import 'year_month_picker/widgets/wheeltile.dart';

class MyMonthPickerr extends StatefulWidget {
  const MyMonthPickerr({Key? key}) : super(key: key);
  @override
  _MyMonthPickerrState createState() => _MyMonthPickerrState();
}

class _MyMonthPickerrState extends State<MyMonthPickerr> {
  List<States_Month> states_month = [];
  String currentState = [
    'January',
    'February',
    'March',
    'April',
    "May",
    "June",
    "July",
    'August',
    "September",
    "October",
    'November',
    'December'
  ][((DateTime.now().month)).toInt()];

  @override
  void initState() {
    super.initState();
    states_month = allStates();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text(
            ''), //Here is where I want to get the month when the user gets off the modal bottom sheet
        onPressed: (() => showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Container(
                color: Colors.blueGrey.shade800,
                child: ListWheelScrollView.useDelegate(
                  itemExtent: 50,
                  controller: FixedExtentScrollController(
                    initialItem: ((DateTime.now().month).toInt() - 1),
                  ),
                  perspective: 0.001,
                  diameterRatio: 1.6,
                  physics: FixedExtentScrollPhysics(),
                  squeeze: 1.0,
                  overAndUnderCenterOpacity: 0.2,
                  useMagnifier: true,
                  magnification: 1.3,
                  onSelectedItemChanged: (index) {
                    setState(() {
                      currentState = states_month[index].names!;
                    });
                  },
                  childDelegate: ListWheelChildBuilderDelegate(
                    childCount: states_month.length,
                    builder: (context, index) {
                      return WheelTile(
                          currentState == states_month[index].names
                              ? Colors.white
                              : Colors.white60,
                          states_month[index].names!);
                    },
                  ),
                ),
              );
            })),
      ),
    );
  }
}

You can put this widget in the body of a Scaffold with backgroundcolor : Colors.blueGrey.shade900 to see what I wanted to do.

I need to display the month for my app project, I've been learning flutter for a few weeks so if someone more experimented than me could help me, it would be very appreciated !

Answer 1

You can simplify the widget like

class MyMonthPickerr extends StatefulWidget {
  const MyMonthPickerr({Key? key}) : super(key: key);
  @override
  _MyMonthPickerrState createState() => _MyMonthPickerrState();
}

class _MyMonthPickerrState extends State<MyMonthPickerr> {
  final months = [
    'January',
    'February',
    'March',
    'April',
    "May",
    "June",
    "July",
    'August',
    "September",
    "October",
    'November',
    'December'
  ];

  int selected = DateTime.now().month;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text(
            '${months[selected]}'), //Here is where I want to get the month when the user gets off the modal bottom sheet
        onPressed: () async {
          await showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  color: Colors.blueGrey.shade800,
                  child: ListWheelScrollView.useDelegate(
                    itemExtent: 50,
                    controller: FixedExtentScrollController(
                      initialItem: ((DateTime.now().month).toInt() - 1),
                    ),
                    perspective: 0.001,
                    diameterRatio: 1.6,
                    physics: FixedExtentScrollPhysics(),
                    squeeze: 1.0,
                    overAndUnderCenterOpacity: 0.2,
                    useMagnifier: true,
                    magnification: 1.3,
                    onSelectedItemChanged: (index) {
                      selected = index;
                      setState(() {}); // onchange update the ui
                    },
                    childDelegate: ListWheelChildBuilderDelegate(
                      childCount: months.length,
                      builder: (context, index) {
                        return Container(
                          child: Text("${months[index]}"),
                        );
                      },
                    ),
                  ),
                );
              });
          // setState(() {}); //or on closing the dialog
        },
      ),
    );
  }
}