Flutter - If Item isSelected then Expand If it's not selected then Collapse

Question

I've a question How can we implement that logic in Flutter If there are many Expandable Items and if we click on of them It expands and if we use to click on the other the first one Collapse and the clicked item expands.

I don't want the stuff you saw in the image I want the first Collapse if the next Expands. Is there any way to do this in Flutter ? I'd be very thankful If you share this question's answer. Thank You! <3

Solution

 ///You can use this code and modify accordingly to your requirement hope this will work for you,Thanks

  import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:font_awesome_flutter/font_awesome_flutter.dart';
    
    class MyExpanableCardViewFlutter extends StatefulWidget {
      @override
      _MyExpanableCardViewFlutterState createState() =>
          _MyExpanableCardViewFlutterState();
    }
    
    class _MyExpanableCardViewFlutterState
        extends State<MyExpanableCardViewFlutter> {
      //controller for TextField
      final username_controller = TextEditingController();
      final password_controller = TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return Container(
            child: Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: MediaQuery.of(context)
                      .size
                      .width, // container width depending on user device screen width
                  height: 260.0,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          fit: BoxFit.fill,
                          image: NetworkImage(
                              "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"))),
                ),
              ),
              ExpansionTile(
                title: Text("Harley-Davidson"),
                subtitle: Text("  Explore the world of H-D"),
                children: <Widget>[
                  IconTheme(
                    data: IconThemeData(
                      color: Colors.amber,
                      size: 32,
                    ),
                    child: StarDisplay(value: 3),
                  ),
                  Text("This image has 3 star rating ")
                ],
              ),
              ExpansionTile(
                title: Text("LOGIN FORM"),
                trailing: Icon(FontAwesomeIcons.signInAlt),
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: TextField(
                      controller: username_controller,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'username',
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: TextField(
                      controller: password_controller,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                      ),
                    ),
                  ),
                  RaisedButton(
                    textColor: Colors.white,
                    color: Colors.blue,
                    onPressed: () {
                      String username = username_controller.text;
                      String password = password_controller.text;
    
                      if (username != '' && password != '') {
                        print('Successfull');
    
                        print(" Value Entered in USERNAME " + username);
                        print("Password entered is : " + password);
                      }
                    },
                    child: Text("Log-In"),
                  )
                ],
              ),
            ],
          ),
        ));
      }
    }
    
    class StarDisplay extends StatelessWidget {
      final int value;
      const StarDisplay({Key key, this.value = 0})
          : assert(value != null),
            super(key: key);
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: List.generate(5, (index) {
            return Icon(
              index < value ? Icons.star : Icons.star_border,
            );
          }),
        );
      }
    }

Comments

[Peter Koltai]

Please add a minimal, reproducible code so that someone can help you.