5
votes

Comment garder l'icône de hamburger sans application visible

J'ai récemment essayé de garder une icône Hamburger pour mon curseur de menu sans AppBar ou du moins complètement invisible. La première tentative était avec un SafeArea mais cela a vidé Scaffold. Ensuite, j'ai essayé de régler l'opacité sur 0,0 comme indiqué sur le code ci-dessous. Mais il donne le même résultat que SafeArea sans rien sur Scaffold. Quelqu'un peut-il aider?

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
          Opacity(
            opacity: 0.0,
            appBar: AppBar(),
          ),
          drawer: new Drawer(
            child: new ListView(),
          ),
          body: new Center(
              child: new Column(
            children: <Widget>[],
          ))),
    );
  }
}

flutter dart opacity flutter-appbar

0 commentaires

3 Réponses :

18
votes

Si je vous ai bien compris, vous souhaitez afficher un bouton de menu pour afficher le Tiroir sans afficher de AppBar .

Une option consiste à utiliser un Stack pour le corps du Sacffold.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
        key: scaffoldKey,
        drawer: new Drawer(
          child: new ListView(),
        ),
        body: Stack(
          children: <Widget>[
            new Center(
                child: new Column(
              children: <Widget>[],
            )),
            Positioned(
              left: 10,
              top: 20,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => scaffoldKey.currentState.openDrawer(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2 commentaires

Remarque pour les débutants comme moi: j'ai utilisé l'approche ci-dessus sur un widget sans état, les choses se sont cassées en revenant d'une page nouvellement consultée. "le getter 'usergesture progress' a été appelé sur null" était l'erreur. les choses fonctionnaient bien lorsque le widget était changé en widget avec état.

Je reçois NoSuchMethodError: membre invalide sur null: 'openDrawer'

5
votes

Vous pouvez rendre AppBar complètement invisible en définissant la même couleur et altitude = 0 capture d'écran ici

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF198BAA),
      appBar: AppBar(
        backgroundColor: Color(0xFF198BAA),
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text('Item1'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

1 commentaires

L'Appbar viendra entre les deux s'il y a un contenu défilable dans le corps de l'échafaud.

2
votes

Si j'ai bien compris votre question.

Vous avez votre propre bouton Menu personnalisé pour ouvrir / fermer le tiroir. Vous ne souhaitez pas non plus utiliser AppBar.

Dans ce cas, vous pouvez utiliser l'objet GlobalKey () pour ouvrir Drawer.

import 'package:flutter/material.dart';

GlobalKey<ScaffoldState> _scaffoldState = GlobalKey<ScaffoldState>();

return Scaffold(
  key: _scaffoldState,
  drawer: DrawerView(),
  body: ThemeScreen(
    header: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        IconButton(
          icon: Icon(Icons.menu,
              color: Colors.white,
              size: 15),
          onPressed: (){
            _scaffoldState.currentState.openDrawer();
          },
        ),
      ],
    ),
  ),
);

0 commentaires