如何使FlexibleSpaceBar的顶部从SliverAppBar的底部开始

时间:2020-08-26 08:36:54

标签: flutter dart

是否可以使FlexibleSpaceBar从SliverAppBar的底部开始?

我真的很喜欢FlexibleSpaceBar所具有的效果,但是我目前唯一能做到的就是在顶部添加一些填充,例如50像素左右。

import 'package:flutter/material.dart';

class AccountScreen extends StatefulWidget {
  static const routeName = '/account';

  @override
  _AccountScreenState createState() => _AccountScreenState();
}

class _AccountScreenState extends State<AccountScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      drawer: Drawer(),
      body: SafeArea(
          child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Title'),
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Column(
                children: <Widget>[
                  Text('Some Text')
                ],
              ),
            ),
          ),
        ],
      )),
    );
  }
}

enter image description here

如您所见,FlexibleSpaceBar从SliverAppBar后面的屏幕顶部开始

1 个答案:

答案 0 :(得分:0)

我这样用。这使FlexibleSpaceBar的顶部开始于SilverAppBar的底部。

SliverAppBar(
    elevation: 0,
    expandedHeight: 300,  // your wanted height
    flexibleSpace: FlexibleSpaceBar()
)