web-dev-qa-db-fra.com

Développez la barre d'applications dans Flutter pour autoriser le titre multiligne?

Est-ce que quelqu'un sait comment je peux créer une barre d'application avec un titre multiligne, conformément aux instructions données ici?

https://material.io/design/components/app-bars-top.html#anatomy

 Multi-line app bar

Des idees pour faire cela? Il semble que cela devrait être simple étant donné que cela fait partie des directives matérielles! Il est intéressant de noter que le titre est défini par l'utilisateur. Je souhaite donc permettre à la barre d'applications de s'étendre d'une ligne à plusieurs lignes (peut-être avec une limite imposée) en fonction des entrées de l'utilisateur.

Mike

flutterflutter-layout
5
MikeCoverUps

Ceci n'est pas encore implémenté.

Cependant, vous pouvez obtenir des résultats similaires en utilisant SliverAppBar conçu pour CustomScrollView. 

Gardez à l'esprit que ce n'est pas optimal cependant. Comme il fallait coder en dur la taille des icônes et des choses. En raison de FlexibleSpacebar ne pas avoir de contrainte de largeur.

 enter image description here 

import 'package:flutter/material.Dart';
import 'package:cloud_firestore/cloud_firestore.Dart';
import 'package:flutter_project/materialSheet.Dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverMultilineAppBar(
            title: "Summer Trip to Tokyo and Kyoto",
            leading: IconButton(
              onPressed: () {},
              icon: Icon(Icons.menu),
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.search),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.more_vert),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class SliverMultilineAppBar extends StatelessWidget {
  final String title;
  final Widget leading;
  final List<Widget> actions;

  SliverMultilineAppBar({this.title, this.leading, this.actions});

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    double availableWidth = mediaQuery.size.width - 160;
    if (actions != null) {
      availableWidth -= 32 * actions.length;
    }
    if (leading != null) {
      availableWidth -= 32;
    }
    return SliverAppBar(
      expandedHeight: 120.0,
      forceElevated: true,
      leading: leading,
      actions: actions,
      flexibleSpace: FlexibleSpaceBar(
        title: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: availableWidth,
          ),
          child: Text(title, textScaleFactor: .8,),
        ),
      ),
    );
  }
}
4
Rémi Rousselet

AppBar vous permettra de vous en approcher, mais vous devrez indiquer la hauteur du widget PreferredSize en bas, en fonction de la longueur de votre texte, ce qui n'est pas idéal.

 enter image description here 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.deepPurple,
      leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
      actions: <Widget>[
        IconButton(icon: Icon(Icons.search), onPressed: () {}),
        IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
      ],
      bottom: PreferredSize(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(80.0, 0.0, 80.0, 16.0),
          child: Text(
            "Summer Trip to Tokyo and Kyoto",
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.0,
            ),
          ),
        ),
        preferredSize: Size(0.0, 80.0),
      ),
    ),
    body: Text("..."),
  );
}
1
Scott