在按下按钮时显示小部件 Flutter

Question

My goal is to display certain widgets based on clicks in a menu. What I need when I click a title, is to shows a certain widget.

Here is the full code:

 class SideMenu extends StatelessWidget { const SideMenu({ Key? key, }): super(key: key); @override Widget build(BuildContext context) { return Drawer( child: SingleChildScrollView( // it enables scrolling child: Column( children: [ DrawerHeader( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( height: defaultPadding * 3, ), Image.asset( "assets/logo/logo_icon.png", scale: 5, ), SizedBox( height: defaultPadding, ), Text("Récolt"), ], )), DrawerListTile( title: "Tableau de bord", svgSrc: "assets/icons/menu_dashbord.svg", press: () {}, ), DrawerListTile( title: "Utilisateurs", svgSrc: "assets/icons/menu_profile.svg", press: () {}, ), DrawerListTile( title: "Collaborateurs", svgSrc: "assets/icons/menu_doc.svg", press: () {}, ), DrawerListTile( title: "Producteurs", svgSrc: "assets/icons/menu_store.svg", press: () {}, ), DrawerListTile( title: "Paramètres", svgSrc: "assets/icons/menu_setting.svg", press: () {}, ), ], ), ), ); } }

I've got a extern page for display my widget like this:

 SizedBox(height: defaultPadding), ListUserEntreprise(), SizedBox(height: defaultPadding), ListUserCollab(),

I don't know how to do it, I tried with using a boolean in onPressed but it didn't work, I don't know really how to declare it and use it with an external page. Can someone help me, please?

Answer 1

use StatefulWidget and try with a boolean with the onPressed, setState() to update UI

Example:

import 'package:flutter/material.dart';

class SideMenu extends StatefulWidget {
  const SideMenu({
    Key? key,
  }) : super(key: key);

  @override
  State<SideMenu> createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  bool _isShow = false;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: SingleChildScrollView(
        // it enables scrolling
        child: Column(
          children: [
            DrawerListTile(
              title: "Tableau de bord",
              svgSrc: "assets/icons/menu_dashbord.svg",
              press: () {
                setState(() {
                  _isShow = !_isShow;
                });
              },
            ),
            Visibility(
                visible: _isShow,
                child: Container(
                  child: Text('Tableau de bord'),
                ))
          ],
        ),
      ),
    );
  }
}