Can we change a widgets variable with InkWell onTap function?-CodePudding

I have a custom written stateful widget that wrapped with InkWell and I want to change the widgets variable when onTap function gets activated. Is there any way to achieve that?

Here is my custom written widget

import 'package:flutter/material.dart';

class DrawerListTile extends StatefulWidget {
  final tileIcon;
  final tileText;
  bool isSelected = false;

  DrawerListTile({this.tileIcon, this.tileText});

  @override
  State<DrawerListTile> createState() => _DrawerListTileState();
}

class _DrawerListTileState extends State<DrawerListTile> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        selected: widget.isSelected,
        selectedTileColor: Colors.black12,
        selectedColor: Colors.black54,
        leading: Icon(widget.tileIcon),
        title: Text(widget.tileText),
     );
  }
}

And here is my InkWell widget

   InkWell(
              onTap: () => setState(() {
                //Here is the part that I want to change the DrawerListTile's isSelected value
              }),
              child: DrawerListTile(
                  tileText: "Some Text", tileIcon: Icons.credit_card_rounded),
            ),

I know that I can write the onTap function inside the DrawerListTile but it is not useful in my situation so is there any way to achieve what I want?

CodePudding user response：

You can do something like the below solution ... you can use your isSelected variable for this purpose.

The parent view:

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

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  String text = DateTime.now().toString();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App'),
      ),
      body: InkWell(
        child: Center(child: TargetWidget(text: text)),
        onTap: () {
          setState(() {
            text = DateTime.now().toString();
          });
        },
      ),
    );
  }
}

The child view:

class TargetWidget extends StatefulWidget {
  String text;
  TargetWidget({Key? key, required this.text}) : super(key: key);

  @override
  State<TargetWidget> createState() => _TargetWidgetState();
}

class _TargetWidgetState extends State<TargetWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(widget.text),
    );
  }
}

CodePudding user response：

You should pass your variable as a parameter to your DrawerListTile(),You can create a model class that will hold all the variables you need and pass them to the widget. Thus, whenever you call the setState function, new parameters are sent to the widget and the widget is updated.

Ex:

InkWell(
 onTap: () => setState(() {
   //Here is the part that I want to change the DrawerListTile's isSelected value
   yourFirstVariable = something;
   yourSecondVariable = something;
 }),
 child: DrawerListTile(
   tileText: "Some Text", 
   tileIcon: Icons.credit_card_rounded, 
   drawerVariables: DrawerModel(
    demoVar1 = yourFirstVariable,
    demoVar2 = yourSecondVariable... 
   ),
  ),
 ),

class DrawerModel {
 final var demoVar1;
 final var demoVar2; 
 
 DrawerModel ({required this.demoVar1, required this.demoVar1,});

}

class DrawerListTile extends StatefulWidget {
  final tileIcon;
  final tileText;
  final DrawerModel drawerVariables;

  bool isSelected = false;

  DrawerListTile({this.tileIcon, this.tileText, this.drawerVariables});

  @override
  State<DrawerListTile> createState() => _DrawerListTileState();
}

class _DrawerListTileState extends State<DrawerListTile> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
        selected: widget.isSelected,
        selectedTileColor: Colors.black12,
        selectedColor: Colors.black54,
        leading: Icon(widget.tileIcon),
        title: Text(widget.tileText),
     );
  }
}