Skip to content

Coin Chart isn't changing when clicking on a different duration. #1

@valentincx

Description

@valentincx

Great app so far, I just found an issue while trying it.

On the Coin detail screen, when you click to change duration (Today, 1W, 1M, etc.), nothing happens.
The state isn't changing and doesn't refresh the CoinRandomedChartWidget.

My guess is to change the CoinDetailScreen to a StatefulWidget and manage the state between the CoinRandomedChartWidget and the ToggleButtons.

I wasn't able to do it in a clean way but it works.
I am really interested to see how you can solve it in a cleaner way, thanks!

`

class CoinDetailScreen extends StatefulWidget {
  final DataModel coin;
  const CoinDetailScreen({
    Key? key,
    required this.coin,
  }) : super(key: key);

  @override
  State<CoinDetailScreen> createState() => _CoinDetailScreenState();
}

class _CoinDetailScreenState extends State<CoinDetailScreen> {
  List<bool> _isSelected = [true, false, false, false, false];

return Scaffold(
  backgroundColor: Color.fromRGBO(11, 12, 54, 1),
  body: CustomScrollView(
    slivers: [
      CoinDetailAppBar(coin: widget.coin, coinIconUrl: coinIconUrl),
      SliverPersistentHeader(
        pinned: true,
        delegate: SliverAppBarDelegate(
          minHeight: 360.0,
          maxHeight: 360.0,
          child: Padding(
            padding: const EdgeInsets.only(top: 32.0),
            child: Column(
              children: [
                Text(
                  '\$' + coinPrice.price.toStringAsFixed(2),
                  style: Theme.of(context).textTheme.headline4,
                ),
                Text(
                  outputDate,
                  style: TextStyle(
                    fontFamily: 'Roboto',
                    fontSize: 18,
                    color: Colors.grey,
                  ),
                ),
                CoinChartWidget(
                    coinPrice: coinPrice, color: Colors.green, data: data),
                ToggleButtons(
                  borderRadius: BorderRadius.circular(8.0),
                  borderColor: Colors.indigoAccent,
                  color: Colors.white,
                  fillColor: Colors.green,
                  selectedColor: Colors.white,
                  selectedBorderColor: Colors.indigoAccent,
                  children: [
                    ToggleButtonWidget(name: "Today"),
                    ToggleButtonWidget(name: "1W"),
                    ToggleButtonWidget(name: "1M"),
                    ToggleButtonWidget(name: "3M"),
                    ToggleButtonWidget(name: "6M"),
                  ],
                  isSelected: _isSelected,
                  onPressed: (int newIndex) {
                    setState(() {
                      for (int i = 0; i < _isSelected.length; i++) {
                        if (i == newIndex) {
                          _isSelected[i] = true;
                        } else {
                          _isSelected[i] = false;
                        }
                      }
                    });
                  },
                ),
                const SizedBox(height: 8.0)
              ],
            ),
          ),
        ),
      ),
      SliverToBoxAdapter(...)
         ],
      ),
    );
  }
}

`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions