Flutter Widgets Visibility on Tap

Question

I have custom paint as parent in all widget. The user can add as many widget like (text,textformfield,image,button,icon) as he want. The color of parent widget is set to transparent as default and when the user tap once the color is set as white for only that widget. Here, when user tap any widget all the widgets parent color turns to white but I want to set the color white of only that widget which is tapped at a time.

My code:

  var isSingleTapped=false;
     Stack(
     children: <Widget>[
      Container(
      width: 200,
      height:200
      child: InkWell(
        onTap: () {
          setState(() {
            isSingleTapped = true;
          });},
        child: WidgetHandle(
               handleColor:
              isSingleTapped ? Colors.white : Colors.transparent,
          child: TextFormField(
              decoration: new InputDecoration(
              border: InputBorder.none,
              hintText: getAddress(),
              hintStyle: TextStyle(color: white, fontSize: 18),
            ),
          ))),
  Container(
      width: 200,
      height:200
      child: InkWell(
        onTap: () {
          setState(() {
            isSingleTapped = true;
          });},
        child: WidgetHandle(
               handleColor:
              isSingleTapped ? Colors.white : 
                Colors.transparent,
          child: Icon(
              icon:Icons.face,
              color:white,
              size:32
            ),
          ))),
         ..OtherWidget..

Answer 1

You should use different variables for different widgets to handle their colour or if you have more number of widgets you can use array to store the states. For Less Multiple Widgets

var isSingleTapped1=false,isSingleTapped2=false;
                 Stack(
                 children: <Widget>[
                  Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped1 = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped1 ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                      Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped2 = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped2 ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                      Container(..same code...),
                      Container(..same code...),

For more number of Multiple widgets

int numberOfContainers=10; 
List<bool> isSingleTapped=[];
for(i=0;i<numberOfContainers;i++)
    isSingleTapped[i]=false;

First we will make a array of bools with the number of widgets we want then run List.generate to generate same kind of widgets with our logic

             Stack(
                 children: List.generate(numberOfContainers,(position){
                     return Container(
                  width: 200,
                  height:200
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        isSingleTapped[position] = true;
                      });},
                    child: WidgetHandle(
                           handleColor:
                          isSingleTapped[position] ? Colors.white : Colors.transparent,
                      child: TextFormField(
                          decoration: new InputDecoration(
                          border: InputBorder.none,
                          hintText: getAddress(),
                          hintStyle: TextStyle(color: white, fontSize: 18),
                        ),
                      ))),
                 })
                  

Update If you want to take complete custom widgets you have to take a List<Widget> and add your widgets to that List .Then you can call List.generate() and pass the particular position of the array to the child of the WidgetHandle

List<Widget> list=[];
Stack(
                     children: List.generate(numberOfContainers,(position){
                         return Container(
                      width: 200,
                      height:200
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            isSingleTapped[position] = true;
                          });},
                        child: WidgetHandle(
                               handleColor:
                              isSingleTapped[position] ? Colors.white : Colors.transparent,
                          child: list[position]
                          ))),
                     })

Answer 2

Try this

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class DataModel {
  bool isTapped = false;
  Widget widget;

  DataModel(this.widget,this.isTapped);
}

class _MyHomePageState extends State<MyHomePage> {
  var _randomWidgets = [
    Text('Some Text Widget'),
    FlutterLogo(size: 50,),
    Icon(Icons.check_circle,),
    FlatButton(child: Text('Some Button Button Widget'),onPressed: (){},),
  ];

  // just to pick random element in array
  final _random = new Random();

  List<DataModel> _widgetList = List();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(itemBuilder: (context,index){
        Widget widget = _widgetList[index].widget;
        Color color = _widgetList[index].isTapped ? Colors.white : Colors.transparent;
        return widgetHandle(handleColor: color, child: widget,index: index);
      },itemCount: _widgetList.length,),
      floatingActionButton: FloatingActionButton(
        onPressed: _addWidget,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  //adds random widget to the list, this it where the user can add widgets 
  _addWidget(){
    _widgetList.add(DataModel(_randomWidgets[_random.nextInt(_randomWidgets.length)], false));
    setState(() {
    });
  }

  Widget widgetHandle({@required Color handleColor, @required Widget child, @required int index})
  {
    return GestureDetector(
    onLongPress: (){
      //this where the user can remove widgets from the list
      _widgetList.removeAt(index);
      setState(() {
      });
    },
    onTap: (){
      setState(() {
        if(_widgetList[index].isTapped)
        _widgetList[index].isTapped = false;
        else
          _widgetList[index].isTapped = true;
      });
    }, child: Container(child: child,color: handleColor,width: 200,height: 200,));
  }

}