I wanted to create similar effect like whatsapp on IOS. i.e On the list of users [contacted persons] screen when i start scroll down the text collapsing bar and text field will appear. and when i scroll up the text will in middle of Appbar and search text field will disappear.
I am using CustomScrollview and slivers to achieve this effect. I have facing one issue when i add a text field in title of FlexibleSpaceBar using column widget. The text "Collasping bar" is moving up above the appbar and i don't know another way to adding it
I am trying below code
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: false,
pinned: true,
expandedHeight: 200,
leading: Container(
margin: EdgeInsets.only(
left: 15,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {
},
child: Text(
'Edit',
style: TextStyle(
fontSize: 16,
),
),
),
],
),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(
right: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
],
),
),
],
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
title: Text(
' Collasping bar',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 40,
),
),
],
),
);
}
}