3
votes

Flutter Scaffold, Actions et End Drawer ensemble?

Dans Scaffold, si le paramètre 'actions' est utilisé, il masque le 'endDrawer'. Est-il possible d'afficher les deux?

var tmp = new Scaffold(
  /// end drawer
    endDrawer: Container(color: Colors.red,
        child: Text('END DRAWER')),
    appBar: new AppBar(
        title: Text('Title'),
    actions: <Widget>[

      /// Cancel, Save
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: IconButton(
          icon: Icon(Icons.clear,size: 24.0,),
          onPressed: () => Navigator.pop(context), //cancelButton,
        ),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: IconButton(
          icon: Icon(Icons.check_circle,size: 30.0,),
          onPressed: () => Navigator.pop(context),
        ),)
    ],
),
    body: new Container(color: Colors.amber,);

flutter

2 commentaires

Veuillez coller l'extrait de code du travail que vous essayez d'effectuer.

vérifiez cette solution: stackoverflow.com / questions / 53952989 /…

4 Réponses :

3
votes

J'ai rencontré le même problème. Je n'ai utilisé qu'une solution délicate pour résoudre ce problème, procédez comme suit:

  class _MainPageState extends State<MainPage> {
  
    final _scaffoldKey = GlobalKey<ScaffoldState>();

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          actions: [
            return IconButton(
              icon: new Icon(Icons.menu, color: Colors.white),
            onPressed: () {
              _scaffoldKey.currentState.openEndDrawer();
            });
          ]
        ),
      );
    }

IconButton(
          icon: new Icon(Icons.menu,color: Colors.white),
          onPressed: () {
            _scaffoldKey.currentState.openEndDrawer();
          },
        ),

ici, dans l'échafaudage, attribuez la variable à la clé

3. Ajoutez le premier bouton icône à icon.menu , lorsque l'icône enfoncée, le tiroir de fin apparaîtra comme indiqué ci-dessous:

return Scaffold(
  key: _scaffoldKey

AND

class _MainPageState extends State<MainPage> {
  
  final _scaffoldKey = GlobalKey<ScaffoldState>(); `

here we add (final _scaffoldKey). inside the class.

3 commentaires

Où ajouter le IconButton? J'ai essayé de l'ajouter à lead:, actions [] mais n'obtiens pas la fonction .openEndDrawer () pour _scaffoldKey.currentState

Vous devez spécifiquement déclarer le type comme suit: final _scaffoldKey = GlobalKey ();

@AntD c'est expliqué ci-dessous dans le code :)

0
votes

Étendez la classe Scaffold

class HomeView extends StatelessWidget {
GlobalKey<ScaffoldState> _key = GlobalKey();
Widget build(BuildContext context){
return CustomScaffoldWidget(
key:_key,
endDrawer:Drawer(),
appBar: AppBar(actions:[Icon(Icons.search),]),
body: Center(child: Text('custom Scaffold'))
);
}

Remplacez votre Scaffold actuel par celui étendu. La clé globale garantira que vous n'obtiendrez pas une erreur d'exception de clé en double sur d'autres pages. Cependant, l'assertion dans le constructeur vous avertira si vous ne fournissez pas de clé.

class CustomScaffoldWidget extends Scaffold {
  CustomScaffoldWidget({
    AppBar appBar,
    Widget body,
    GlobalKey<ScaffoldState> key,
    Widget endDrawer,
    Widget drawer,
    FloatingActionButton floatingActionButton,
    FloatingActionButtonLocation floatingActionButtonLocation,
    FloatingActionButtonAnimator floatingActionButtonAnimator,
    List<Widget> persistentFooterButtons,
    Color backgroundColor,
    Widget bottomSheet,
    Widget bottomNavigationBar,
    bool resizeToAvoidBottomPadding = true,
    bool primary = true,
  })  : assert(key != null),
        super(
          key: key,
          appBar: endDrawer != null &&
                  appBar.actions != null &&
                  appBar.actions.isNotEmpty
              ? _buildEndDrawerButton(appBar, key)
              : appBar,
          body: body,
          floatingActionButton: floatingActionButton,
          floatingActionButtonLocation: floatingActionButtonLocation,
          floatingActionButtonAnimator: floatingActionButtonAnimator,
          persistentFooterButtons: persistentFooterButtons,
          drawer: drawer,
          endDrawer: endDrawer,
          bottomNavigationBar: bottomNavigationBar,
          bottomSheet: bottomSheet,
          backgroundColor: backgroundColor,
          resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
          primary: primary,
        );

  static AppBar _buildEndDrawerButton(
      AppBar myAppBar, GlobalKey<ScaffoldState> _keyScaffold) {
    myAppBar.actions.add(IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => !_keyScaffold.currentState.isEndDrawerOpen
            ? _keyScaffold.currentState.openEndDrawer()
            : null));
    return myAppBar;
  }
}

}

0 commentaires

0
votes

Je suggère de créer un Scaffold personnalisé en copiant-collez simplement le code ci-dessous et en utilisant MyCustomScaffold au lieu de Scaffold.

class MyCustomScaffold extends Scaffold {
  static GlobalKey<ScaffoldState> _keyScaffold = GlobalKey();
  MyCustomScaffold({
    AppBar appBar,
    Widget body,
    Widget floatingActionButton,
    FloatingActionButtonLocation floatingActionButtonLocation,
    FloatingActionButtonAnimator floatingActionButtonAnimator,
    List<Widget> persistentFooterButtons,
    Widget drawer,
    Widget endDrawer,
    Widget bottomNavigationBar,
    Widget bottomSheet,
    Color backgroundColor,
    bool resizeToAvoidBottomPadding = true,
    bool primary = true,
  }) : super(
          key: _keyScaffold,
          appBar: endDrawer != null &&
                  appBar.actions != null &&
                  appBar.actions.isNotEmpty
              ? _buildEndDrawerButton(appBar)
              : appBar,
          body: body,
          floatingActionButton: floatingActionButton,
          floatingActionButtonLocation: floatingActionButtonLocation,
          floatingActionButtonAnimator: floatingActionButtonAnimator,
          persistentFooterButtons: persistentFooterButtons,
          drawer: drawer,
          endDrawer: endDrawer,
          bottomNavigationBar: bottomNavigationBar,
          bottomSheet: bottomSheet,
          backgroundColor: backgroundColor,
          resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
          primary: primary,
        );

  static AppBar _buildEndDrawerButton(AppBar myAppBar) {
    myAppBar.actions.add(IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => !_keyScaffold.currentState.isEndDrawerOpen
            ? _keyScaffold.currentState.openEndDrawer()
            : null));
    return myAppBar;
  }
}

0 commentaires

0
votes

J'ai trouvé un moyen plus simple. pour le titre, créez une ligne et ajoutez un texte, un espaceur et des icônes. Dans mon cas, je voulais le titre sur le côté gauche et les icônes sur la droite à côté du tiroir de fin.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        endDrawer: Drawer(
            child: ListView.builder(
                itemCount: 2,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    leading: Icon(Icons.list),
                    title: Text("GFG item $index"),
                    trailing: Icon(Icons.done),
                  );
                })),
        appBar: AppBar(
            title: Row(
          children: [
            Text(
              "App title",
              style: TextStyle(color: Colors.white),
            ),
            Spacer(),
            IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {},
              color: Colors.white,
            )
          ],
        )),
        body: _showBody());
  }

0 commentaires