web-dev-qa-db-fra.com

Flutter: Comment supprimer l'élévation de ExpansionPanelList?

J'essayais de lister la liste déroulante comme un widget, mais heureusement, j'ai trouvé le widget de liste de panneaux d'extension pour obtenir mon UX souhaité.

Donc, j'utilise ExpansionPanelList dans mon application Flutter, mais je n'ai pas besoin de l'élévation/bordure-ombre par défaut qui l'accompagne.

Je ne sais pas comment l'enlever, de manière à lui donner l'air d'une partie du corps plutôt que d'un conteneur surélevé.

Ressemble actuellement à ceci:

mock

Voici mon code:

class _PracticetestComp extends State<Practicetest> {
  var listofpracticetest;
  List<Item> _data = [
    Item(
      headerValue: 'Previous Question Papers',
      expandedValue: '',
    )
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffF8FDF7),
        appBar: AppBar(
          backgroundColor: Color(0xffF8FDF7), // status bar color
          brightness: Brightness.light,
          elevation: 0.0,
          leading: Container(
            margin: EdgeInsets.only(left: 17),
            child: RawMaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              child: new Icon(
                Icons.keyboard_backspace,
                color: Colors.red[900],
                size: 25.0,
              ),
              shape: new CircleBorder(),
              elevation: 4.0,
              fillColor: Colors.white,
              padding: const EdgeInsets.all(5.0),
            ),
          ),
        ),
        body: Container(
          // height: 200,
          margin: EdgeInsets.only(top: 40),
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  Container(
                      margin: EdgeInsets.only(top: 30),
                      child: Theme(
                          data: Theme.of(context)
                              .copyWith(cardColor: Color(0xffF8FDF7)),
                          child: _buildPanelPreviousPapers()))
                ],
              )
            ],
          ),
        ));
  }

  Widget _buildPanelPreviousPapers() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = !isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: Container(

            child: ListTile(
              leading: Text(
                'Alegbra',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
              ),

              ),
            ),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    this.expandedValue,
    this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}
4
Gaurav Kumar

envelopper l'ensemble de votre enfant de widget d'expansion à l'intérieur Widget de matéria et changer l'élévation en fonction de l'expansion enfant est développé ou non avec la méthode

   Material(
        elevation: isSelected ? 4 : 0,
        child: ExpansionTile(
         onExpansionChanged:(value){
                            isSelected=value;
                            setState(){};
                                   },

         title: getExpantionTitle(context),
          children: getChildrentList(),
              ),
            ),
        ),

au cas où vous n'aimez pas le séparateur dans la tuile ExpansionTile, faites quelque chose comme ça

        final theme = Theme.of(context).copyWith(dividerColor: 
        Colors.transparent);
     //use as a child 
 child:Theme(data: theme, child: ExpansionTile(...));  
0
sourav pandit