-
-
Save nesscx/721cd823350848e3d594ba95df68a7fa to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class App extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Fading out CircleAvatar', | |
theme: ThemeData( | |
primarySwatch: Colors.purple, | |
), | |
home: Scaffold( | |
body: DefaultTabController( | |
length: 2, | |
child: NestedScrollView( | |
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { | |
return <Widget>[ | |
SliverOverlapAbsorber( | |
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), | |
child: new SliverAppBar( | |
expandedHeight: 254.0, | |
pinned: false, | |
leading: Icon(Icons.arrow_back), | |
title:Text('Fade'), | |
forceElevated: innerBoxIsScrolled, | |
flexibleSpace: new FlexibleSpaceBar( | |
centerTitle: true, | |
title: Column( | |
mainAxisAlignment: MainAxisAlignment.end, | |
children: <Widget>[ | |
CircleAvatar( | |
radius: 36.0, | |
child: Text( | |
'N', | |
style: TextStyle( | |
color: Colors.white, | |
), | |
), | |
backgroundColor: Colors.green, | |
), | |
Text('My Name'), | |
], | |
), | |
background: Container( | |
color: Colors.purple, | |
), | |
), | |
), | |
), | |
SliverPersistentHeader( | |
pinned: true, | |
delegate: _SliverAppBarDelegate( | |
new TabBar( | |
indicatorColor: Colors.white, | |
indicatorWeight: 3.0, | |
tabs: <Tab>[ | |
Tab(text: 'TAB 1',), | |
Tab(text: 'TAB 2',), | |
], | |
), | |
), | |
), | |
]; | |
}, | |
body: TabBarView( | |
children: <Widget>[ | |
SingleChildScrollView( | |
child: Container( | |
height: 300.0, | |
child: Text('Test 1', style: TextStyle(color: Colors.black, fontSize: 80.0)), | |
), | |
), | |
SingleChildScrollView( | |
child: Container( | |
height: 300.0, | |
child: Text('Test 2', style: TextStyle(color: Colors.red, fontSize: 80.0)), | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
); | |
} | |
} | |
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate { | |
_SliverAppBarDelegate(this._tabBar); | |
final TabBar _tabBar; | |
@override | |
double get minExtent => _tabBar.preferredSize.height; | |
@override | |
double get maxExtent => _tabBar.preferredSize.height; | |
@override | |
Widget build( | |
BuildContext context, double shrinkOffset, bool overlapsContent) { | |
return new Container( | |
color: Colors.deepPurple, | |
child: _tabBar, | |
); | |
} | |
@override | |
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) { | |
return false; | |
} | |
} |
Tried to achieve what you asked in the group and came up with this:
import 'package:flutter/material.dart';
class FadingPage extends StatefulWidget {
FadingPage({Key key, this.title}) : super(key: key);
final String title;
@override
_FadingPageState createState() => new _FadingPageState();
}
const kExpandedHeight = 300.0;
class _FadingPageState extends State<FadingPage> {
ScrollController _scrollController;
@override
void initState() {
super.initState();
_scrollController = ScrollController()..addListener(() => setState(() {}));
}
bool get _showTitle {
print(kToolbarHeight * 2);
return _scrollController.hasClients &&
_scrollController.offset > kExpandedHeight - (kToolbarHeight * 3);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {},
),
expandedHeight: kExpandedHeight,
title: Text("Fading out top"),
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: AnimatedOpacity(
opacity: _showTitle ? 0.0 : 1.0,
duration: Duration(milliseconds: 200),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CircleAvatar(
radius: 36.0,
child: Text(
'N',
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: Colors.green,
),
Text('My Name ;)'),
],
),
),
background: Container(
color: Colors.purple,
),
),
),
SliverList(
delegate: SliverChildListDelegate(
List<Text>.generate(100, (int i) {
return Text("List item $i");
}),
),
),
],
),
);
}
}
You can play around and maybe it will work for you
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is the code above running with no fading: