Question 389069 in Flutter Question posted in
The official Flutter documentation can be found here.

How does one create a dynamic, changing widget in Flutter, when all the info is on the same page?

Thanks in advance for any help you can give!

I’m currently developing in Flutter 3.0 using VS Code. I’m admittedly not the best at Flutter and have only been using it off and on for a few months now in between other project tasks for my job.

The problem I’m having is that I don’t quite understand how to get Stateful widgets to cooperate and communicate with each other on the same page. In my specific example, I am making a "dashboard" of sorts. For this page/screen of the app, the "Dashboard" widget serves as the foundation for the other widgets on this page. There are two sections: a left handed panel that is a Menu widget; and a right handed panel that defaults to "Option 1" widget. Within the menu, I have used a gesture detector to properly obtain touch/click events and can trigger prints to the console (let alone, change the background highlight color behind each of the options). What I’m trying to do is, whenever I click on an Option widget from the menu, the panel on the right displays a different, related widget that contains its own set of widgets and data. Even though I most definitely have the click events registering and working, no matter what I do, I can’t seem to get the "Menu" widget to change what is displayed in the other panel. I’m not looking for someone to code it for me (even though some miraculous exact solution would probably ease my headache at this point). What I’m asking for is an example or method of how to display/load widgets on my right hand panel when I click the different options from the Menu widget. Rather than code I’ve provided a very basic dev-art graphic depicting the situation. If anyone who wishes to help needs code, please respond with what parts you might like to see and I’ll share what I can. Thanksenter image description here

I have tried Googling for the answer but nothing I’ve found helps, including passing information using riverpod, and including creating instances of the widgets I need to populate to the screen and sharing them and the state information with the containing Dashboard widget.

Tags:

2

Answers


  1. 0

    If I understood your problem correctly, you are struggling with states of the right handed dashbord panel. what you want to do is, define a string called "state" in the menu panel on the left, then in the onTap property of the GestureDetector, you want to setState this "state" to for example "Option1" or "Option2". Then If these widgets are in the same build method you can use this state to return different styles of pages. if they are different calsses, you want to pass this state variable to the other class and use it like this: "widget.state" and then you can use that to return different styles of pages. like this code below:

    String state = 'Describing';

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    if (state == 'Describing') {
      return Scaffold(
        backgroundColor: light2,
        body: Center(
          child: Container(...
else if (state == 'AppTalking') {
      return Scaffold(
        backgroundColor: light2,
        body: Center(
          child: Container(
            width: 312,
            height: 264,
    Login or Signup to reply.
  2. 0

    You could even use just plain flutter state management for this, which I would recommend to do so in order to better understand how it works, but if you want to use riverpod for this you could try and adjust the following script.

    Basically with riverpod you can avoid Stateful widgets altogether since the providers are in charge of reloading the state. ref.watch(dashboardProvider) in particular makes sure to rebuild InfoPanel() every time the value of dashboardProvider changes.
    Do mind that this is not the best way to do this, since each of the Info1/2/3() widgets, as well as InfoPanel(), will be created from scratch every time a change is triggered. For what I suspect you’re trying to build, I would take a look at flutter’s Drawer or Tabs.

    In any case here’s an example:

    import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final dashboardProvider = StateProvider<int>((ref) => 0);

class DashBoard extends ConsumerWidget {
  const DashBoard({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
      width: double.infinity,
      height: 300,
      color: Colors.orange,
      child: Row(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("Menu Panel"),
              TextButton(
                onPressed: () => ref.read(dashboardProvider.notifier).state = 0,
                child: const Text("Clickable Option 1"),
              ),
              TextButton(
                onPressed: () => ref.read(dashboardProvider.notifier).state = 1,
                child: const Text("Clickable Option 2"),
              ),
              TextButton(
                onPressed: () => ref.read(dashboardProvider.notifier).state = 2,
                child: const Text("Clickable Option 3"),
              ),
            ],
          ),
          const Expanded(
            child: Center(
              child: InfoPanel(),
            ),
          ),
        ],
      ),
    );
  }
}

class InfoPanel extends ConsumerWidget {
  const InfoPanel({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final infoPanelIndex = ref.watch(dashboardProvider);

    return switch (infoPanelIndex) {
      (1) => const Info2(), // dashboardProvider value == 1
      (2) => const Info3(), // dashboardProvider value == 2
      (_) => const Info1(), // dashboardProvider value -> anything else
    };
  }
}

class Info1 extends StatelessWidget {
  const Info1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.black,
    );
  }
}

class Info2 extends StatelessWidget {
  const Info2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.white,
    );
  }
}

class Info3 extends StatelessWidget {
  const Info3({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search