Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

enter image description here

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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,
            );
          }),
        );
      }
    }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading