Showing widgets by taping on different options in flutter?-CodePudding

I am using flutter. I want to show different widgets when I tap on different options. On selecting option A, the option A widget is shown. On selecting option B, the option B widget is shown below the options bar and vice versa (like a tab bar). The code is attached below. I am glad if someone helps. ..

import 'package:flutter/material.dart';

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

@override
State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text("Cards"),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        optionCards("A", "assets/icons/recycle.png", context, "1"),
        optionCards("B", "assets/icons/tools.png", context, "2"),
        optionCards("C", "assets/icons/file.png", context, "3"),
      ],
    ),
  ),
 );
}

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
return Container(
  width: 100,
  height: 100,
  decoration: ShapeDecoration(
    color: Colors.grey,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
  ),
  child: SingleChildScrollView(
    child: Column(
      children: [
        const Padding(
          padding: EdgeInsets.only(top: 13),
          child: IconButton(
            onPressed: null,
            icon: Icon(Icons.file_copy),
          ),
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 14,
            fontFamily: 'CeraPro',
            color: Color.fromRGBO(0, 0, 0, 1),
          ),
        ),
      ],
     ),
   ),
 );
}

Widget optiona() {
return Container();
}

Widget optionb() {
 return Container();
}

Widget optionc() {
return Container();
}

}

CodePudding user response：

You can use the Visibility widget to wrap the widgets which you want to hide or show and keep track of which one to show through a variable. Then you can set the visible property accordingly.

import 'package:flutter/material.dart';

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

@override
State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {
var showOption = "";

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text("Cards"),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        optionCards("A", "assets/icons/recycle.png", context, "1"),
        optionCards("B", "assets/icons/tools.png", context, "2"),
        optionCards("C", "assets/icons/file.png", context, "3"),
      ],
    ),
  ),
 );
}

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
return Container(
  width: 100,
  height: 100,
  decoration: ShapeDecoration(
    color: Colors.grey,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
  ),
  child: SingleChildScrollView(
    child: Column(
      children: [
        const Padding(
          padding: EdgeInsets.only(top: 13),
          child: IconButton(
            onPressed: null,
            icon: Icon(Icons.file_copy),
          ),
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 14,
            fontFamily: 'CeraPro',
            color: Color.fromRGBO(0, 0, 0, 1),
          ),
        ),
      ],
     ),
   ),
 );
}

Widget optiona() {
return Visibility(visible: showOption == "A", child: Container());
}

Widget optionb() {
 return Visibility(visible: showOption == "B", child: Container());
}

Widget optionc() {
return Visibility(visible: showOption == "C", child: Container());
}

Now you can change the showOption variable whenever you want to show another option.

CodePudding user response：


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

  @override
  State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {

  Widget? selectedOption;
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Cards"),
    ),
    body: Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optiona();
                  });
                },
                child: optionCards("A", "assets/icons/recycle.png", context, "1")
              ),
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optionb();
                  });
                },
                child: optionCards("B", "assets/icons/tools.png", context, "2")
              ),
              InkWell(
                onTap: (){
                  setState(() {
                    selectedOption = optionc();
                  });
                },
                child: optionCards("C", "assets/icons/file.png", context, "3")
              ),
            ],
          ),

          // options
          if(selectedOption != null) selectedOption!
        ],
      ),
    ),
  );
  }

Widget optionCards(
  String text, String assetImage, BuildContext context, String cardId) {
  return Container(
    width: 100,
    height: 100,
    decoration: const ShapeDecoration(
      color: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(5),
        ),
      ),
    ),
    child: SingleChildScrollView(
      child: Column(
        children: [
          const Padding(
            padding: EdgeInsets.only(top: 13),
            child: IconButton(
              onPressed: null,
              icon: Icon(Icons.file_copy),
            ),
          ),
          Text(
            text,
            style: const TextStyle(
              fontSize: 14,
              fontFamily: 'CeraPro',
              color: Color.fromRGBO(0, 0, 0, 1),
            ),
          ),
        ],
      ),
    ),
  );
  }

  Widget optiona() {
  return Container();
  }

  Widget optionb() {
  return Container();
  }

  Widget optionc() {
  return Container();
  }
}