web-dev-qa-db-fra.com

Re: créer un bouton déroulant dans le flutter

J'ai utilisé un DropDownButton dans ma construction, mais je veux que la flèche soit affichée à la fin et que les éléments déroulants soient affichés à partir de la flèche, mais dans mon application, ils sont affichés du haut. J'ai joint les captures d'écran pour votre référence.

pouvez-vous me dire comment changer cela ou s'il existe un autre moyen de créer simplement un menu déroulant.

Un exemple serait très apprécié.

Veuillez excuser mon code car je suis nouveau dans la programmation et vos commentaires ou suggestions sont les bienvenus.

Merci beaucoup, Mahi.

import 'package:flutter/material.Dart';
import 'package:flutter/widgets.Dart';
import 'Dart:ui';

void main(){
    runApp(new BranchSetup());
      }

class BranchSetup extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
         return new _BranchSetupState();
          }
       } 

    class _BranchSetupState extends State<BranchSetup> with 
                                WidgetsBindingObserver {

     @override
           Widget build(BuildContext context){
           return new MaterialApp(
              theme: new ThemeData(
                  primaryColor: const Color(0xFF229E9C),
                                ),
              title: 'Branch Setup',
              home: new Scaffold(
              body: new Container(
              child: new ListView(
                children: <Widget>[
                 new Container(
                   margin: const EdgeInsets.all(16.0),
                    child: new Row(
                     children: <Widget>[
                      new Expanded(
                        child: new TextFormField(
            decoration: new InputDecoration([enter image description here][1]                           
                       labelText: 'Branch Name',
                   ),
                ),
              ),
            ],
          ),
         ),
          new Container(
            margin: const EdgeInsets.all(16.0),
            child:
              new DropdownButton<String>(
                items: <String>['Mens','Womans']
                      .map((String value) {
                    return new DropdownMenuItem<String>(
                        value: value,
                        child: new Text(value),
                    );
                  }
                  ).toList(),
               onChanged: null,
                ),
            ),

          ],
        ),
        ),
     ),
    );
   }

  }
dartflutter
5
Mahi

Cela ressemble à un bug dans Flutter. J'ai déposé un numéro .

En attendant, vous pouvez contourner le problème en enveloppant votre DropdownButton dans un Column.

 screenshot 

import 'package:flutter/material.Dart';

void main() {
  runApp(new MaterialApp(home: new DemoApp()));
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('DropdownButton Example')),
      body: new ListView(
        children: [
          new Column(
            children: <Widget>[
              new DropdownButton<String>(
                items: <String>['Foo', 'Bar'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}
6
Collin Jackson

Vous pouvez essayer le plugin que j'ai créé: flutter_search_panel . Pas un plugin déroulant, mais vous pouvez afficher les éléments avec la fonctionnalité de recherche.

Utilisez le code suivant pour utiliser le widget:

    FlutterSearchPanel(
        padding: EdgeInsets.all(10.0),
        selected: 'a',
        title: 'Demo Search Page',
        data: ['This', 'is', 'a', 'test', 'array'],
        icon: new Icon(Icons.label, color: Colors.black),
        color: Colors.white,
        textStyle: new TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0, decorationStyle: TextDecorationStyle.dotted),
        onChanged: (value) {
          print(value);
        },
   ),
1
dranzer