6
votes

Comment définir la hauteur minimale de SliverAppBar dans NestedScrollView dans Flutter

Je souhaite utiliser SliverAppBar dans NestedScrollView dans une application Scaffold ordinaire. Je voudrais également avoir une hauteur minimale de la barre d'application lorsque l'utilisateur fait défiler vers le bas.

Je ne comprends pas comment utiliser le widget PreferredSize ni aucune autre solution trouvée en ligne, par exemple ceci .

Voici ma solution simplifiée actuelle: p>

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'Oswald'),
      home: SliverHome(),
    );
  }
}

class SliverHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: testHome(),
    );
  }

  Widget testHome() {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar( // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )
          ];
        },
        body: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => {},
        tooltip: '+',
        child: Icon(Icons.accessibility_new),
      ),
    );
  }
}

Je voudrais arrêter la réduction de la barre d'applications quelque part près de 60 dp

screenshot

flutter dart user-interface

0 commentaires

3 Réponses :

12
votes

Il s'agit en fait d'une fonctionnalité demandée - https://github.com/flutter/flutter/issues / 21298

Une solution de contournement consiste à utiliser Bottom

SliverAppBar(
              // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              bottom: PreferredSize(                       // Add this code
                preferredSize: Size.fromHeight(60.0),      // Add this code
                child: Text(''),                           // Add this code
              ),                                           // Add this code
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )

0 commentaires

1
votes

Votre code fonctionne également correctement après avoir diminué la taille du conteneur.

 SliverAppBar( // this is where I would like to set some minimum constraint
          expandedHeight: 300,
          floating: false,
          pinned: true,
          flexibleSpace: Container(
            padding: EdgeInsets.all(10),
            height: 340,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: 10,  //decreas the size
                ),
                Container(
                  height: 10, //decrease the size
                ),
                Expanded(child: Container()),
                Text('TEST'),
              ],
            ),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage('https://picsum.photos/400/400'),
                    fit: BoxFit.cover)),
          ),
        )

0 commentaires

3
votes

Je ne sais pas depuis quand exactement, mais à partir de maintenant, vous pouvez également utiliser la propriété collapsedHeight, documentée ci-dessous:

https://api.flutter.dev/flutter/material/SliverAppBar /collapsedHeight.html

Actuellement, je suis sur flutter 1.20.1 et j'ai cette propriété disponible.

0 commentaires