Skip to content

Instantly share code, notes, and snippets.

@timelessfusionapps
Created January 29, 2022 10:52
Show Gist options
  • Save timelessfusionapps/c1007f964d33cf49f876425afdd7e1c2 to your computer and use it in GitHub Desktop.
Save timelessfusionapps/c1007f964d33cf49f876425afdd7e1c2 to your computer and use it in GitHub Desktop.
SliverAppBar with Rounded Corners at the bottom
import 'dart:math';
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
class SliverAppBarRounded extends StatefulWidget {
const SliverAppBarRounded({Key? key}) : super(key: key);
@override
_SliverAppBarRoundedState createState() => _SliverAppBarRoundedState();
}
class _SliverAppBarRoundedState extends State<SliverAppBarRounded> {
late ScrollController _scrollController;
static const kExpandedHeight = 200.0;
final _randomWord = <WordPair>[];
//Color _appBarColor = AppColors.blackCoffee;
@override
void initState() {
// TODO: implement initState
super.initState();
_scrollController = ScrollController()
..addListener(() {
setState(() {});
});
}
bool get _showAppBarTitle {
return _scrollController.hasClients &&
_scrollController.offset > kExpandedHeight - kToolbarHeight;
}
Widget buildListRow(WordPair pair) {
return Row(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 20,
width: 20,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
),
),
const SizedBox(
width: 16,
),
Text(
pair.asCamelCase,
style: const TextStyle(fontSize: 22.0),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(
stretch: true,
centerTitle: true,
iconTheme: const IconThemeData(color: Colors.black),
title: _showAppBarTitle ? const Text('App Bar Title') : null,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
pinned: true,
snap: false,
floating: false,
expandedHeight: kExpandedHeight,
flexibleSpace: _showAppBarTitle
? null
: FlexibleSpaceBar(
/*titlePadding: const EdgeInsetsDirectional.only(
start: 16.0, bottom: 16.0),*/
centerTitle: true,
title: const Text(
'Beach Side',
textScaleFactor: 1.0,
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
stretchModes: const <StretchMode>[
StretchMode.zoomBackground,
StretchMode.blurBackground,
StretchMode.fadeTitle,
],
// ClipRRect added here for rounded corners
background: ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
child: Image.asset(
'assets/images/newBeach.jpg',
fit: BoxFit.fill,
),
),
),
),
//SliverAppBarOpacity()
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int i) {
if (i.isOdd) {
return const Divider();
}
final index = i ~/ 2;
if (index >= _randomWord.length) {
_randomWord.addAll(generateWordPairs().take(10));
}
return buildListRow(_randomWord[index]);
},
//childCount: 20,
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment