Is there a way to display a widget conditionally

Question

I am trying to make a Music Playing App. And in that app i want to implement search feature. This requires me to show list of 5 answers related to query only if the user is trying to search, else do not.

I tried to use FutureBuilder inside if statement as i am using API, but it did not work. I have tried building separate widget and then calling it inside the if statement but to no avail. Then i tried to display a simple container inside if statement but it would not show.

Here is the code:

onChanged: (value) async {
                        final String accessToken =
                            await jiosaavn.getaccesstoken();
                        if (selectedValue == "Artists" && value != '')
                          Container(
                            width: double.infinity,
                            height: double.infinity,
                            color: Colors.blue,
                          );
                        
                    
                        if (selectedValue == "Albums")
                         
                          Container(
                            width: double.infinity,
                            height: double.infinity,
                            color: Colors.blue,
                          );
                    
                        
                        if (selectedValue == "Tracks" && value != '') 
                        
                          Container(
                            width: double.infinity,
                            height: double.infinity,
                            color: Colors.blue,
                          );
                        
                        
                      },

Even Container is not displayed. Is it possible?

score 1 · Answer 1 · answered Jul 15 '23 at 20:10

The reason why your solution does not work is because the onChanged callback does not return anything, especially not anything to the current widget tree.

Below is a simple stateful widget with a dropdown that will set state, which cause a rerender of the view calling the _buildView() function with the new _selectedItem value, returning the widget you want.

import 'package:flutter/material.dart';

class Sample extends StatefulWidget {
  const Sample({super.key});

  @override
  State<Sample> createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  String _selectedItem = '';

  Widget _buildView() {
    switch (_selectedItem) {
      case 'Artists':
        return Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
        );
      case 'Albums':
        return Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
        );
      case 'Tracks':
        return Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
        );
      default:
        return Text('Select an item');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DropdownButton<String>(
          value: _selectedItem,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? value) {
            // This is called when the user selects an item.
            setState(() {
              _selectedItem = value!;
            });
          },
          items: ['Artists', 'Albums', 'Tracks'].map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
        _buildView(),
      ],
    );
  }
}

score 0 · Accepted Answer · answered Jul 15 '23 at 20:10

You are trying to display a container inside an if statement. However, you cannot display a widget inside an if statement like that. Instead, you can use a StatefulWidget and update the state of the widget when the user types in a search query.

Here's an example of how you can do this:

class MyWidget extends StatefulWidget {
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _showContainer = false;


  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: (value) {
            if (value.isNotEmpty) {
              setState(() {
                _showContainer = true;
              });
            } else {
              setState(() {
                _showContainer = false;
              });
            }
          },
        ),
        if (_showContainer)
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue,
          ),
      ],
    );
  }
}

Here, there is a StatefulWidget and a boolean _showContainer to keep track of whether or not to show the container. When the user types in a search query, we update the state of _showContainer and show the container accordingly.

Is there a way to display a widget conditionally

2 Answers2