I want first ExpansionTile's item default is open. I want to When I click another item, current item is will close. How can I do it?

后端 未结 2 1865
孤独总比滥情好
孤独总比滥情好 2021-01-23 15:25
 body: Container(color: Colors.white,
          child: SingleChildScrollView(
              child : Column( 
                children : [
                  Padding(paddi         


        
相关标签:
2条回答
  • 2021-01-23 15:48

    Instead of initiallyExpanded: false, you can use initiallyExpanded: index == 0. By doing this you will check the index of your item and if it is 0, it will be expanded initially.

     ListView.builder(itemCount: 10, itemBuilder: (context, index) {
          return ExpansionTile(
            initiallyExpanded: index == 0,
            title: Text('Title #$index'), 
            children: <Widget> [
              Text('Expansion #$index'),
            ],
          );
        }),
    

    To collapse ExpandedTile after choosing item you can check following links

    Flutter - Collapsing ExpansionTile after choosing an item

    Flutter- ExpansionTile expand and collapse on click

    0 讨论(0)
  • 2021-01-23 15:53

    This great solution

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'ExpansionTile Collapse',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'ExpansionTile Collapse'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      // selected's value = 0. For default first item is open.
      int selected = 0; //attention
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            centerTitle: true,title: Text('ExpansionTile Collapse', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
          ),
          body: Container(color: Colors.white,
              child: SingleChildScrollView(
                  child : Column( 
                    children : [                  
                      ListView.builder(
    
                          key: Key('builder ${selected.toString()}'), //attention
    
                          padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          itemCount: 5,
                          itemBuilder: (context, index) {                        
                            return Column(
                              children: <Widget>[
                                Divider(
                                  height: 17.0,
                                  color: Colors.white,
                                ), 
                                      ExpansionTile(  
    
                                            key: Key(index.toString()), //attention                                                                  
                                            initiallyExpanded : index==selected, //attention
    
                                            leading: Icon(Icons.person, size: 50.0, color: Colors.black,),
                                            title: Text('Faruk AYDIN ${index}',style: TextStyle(color: Color(0xFF09216B), fontSize: 17.0, fontWeight: FontWeight.bold)), 
                                            subtitle: Text('Software Engineer', style: TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.bold),),
                                            children: <Widget>[                                       
                                              Padding(padding: EdgeInsets.all(25.0), 
                                                          child : Text('DETAİL ${index} \n' + 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',)
                                                          ) 
                                            ],
                                            onExpansionChanged: ((newState){
                                                if(newState)
                                                    setState(() {
                                                      Duration(seconds:  20000);
                                                      selected = index; 
                                                    });
                                                    else setState(() {
                                                      selected = -1; 
                                                    });        
                                            })
                                          ),
    
                                  ]
                                );
                          },
                            )
                    ]
                        ),
              )           
            )
        );
      }
    }
    
    
    0 讨论(0)
提交回复
热议问题