I’m creating website with floating SliverAppBar which hides when page is scrolled down. I added alwaays visible appBar with TextButtons. I want to scroll down to specific container when TextButton is pressed. Below method works perfectly with standard AppBar but in such situation there’s no conflict between hiding SliverAppBar and scrolling function. Problem starts when I try to mix it with hiding SliverAppBar. After pressing TextButton SliverAppBar hides but body moves just a few pixels instead of scolling directly to specific item. Anybody has idea how to achieve this maintaining such page layout?
enter image description here
class BigScreen extends StatelessWidget { BigScreen({ super.key, });
@override Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
var bodyWidth = MediaQuery.of(context).size.width;
var bodyHeight = MediaQuery.of(context).size.height - (MediaQuery.of(context).padding.top + kToolbarHeight);
var key1 = GlobalKey();
var key2 = GlobalKey();
var key3 = GlobalKey();
var key4 = GlobalKey();
return Scaffold(
extendBodyBehindAppBar: true,
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
pinned: true,
snap: true,
floating: true,
backgroundColor: Color.fromARGB(255, 83, 83, 83),
expandedHeight: 150.0,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.fromLTRB(200, 0, 0, 60),
title: Row(
children: [
Container(
child: Row(
children: [
CircleAvatar(
radius: 29,
backgroundImage:
AssetImage('images/monster_logo.jpg'),
),
SizedBox(
width: 5,
),
SizedBox(
width: 160,
child: RichText(
textAlign: TextAlign.start,
text: TextSpan(
text: 'MONSTER GARAGE MOBILNY MECHANIK',
style: GoogleFonts.bebasNeue(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 20,
height: 0.8,
),
),
),
softWrap: true,
)),
],
),
),
SizedBox(
width: 300,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
minimumSize: const Size(70, 35),
),
onPressed: () => launchUrlString('tel://514483455'),
child: Row(
children: [
Icon(Icons.smartphone,
color: Colors.white, size: 17),
SizedBox(width: 3),
Text(
'514 483 455',
style: GoogleFonts.bebasNeue(
fontSize: 18, letterSpacing: 0.2),
),
],
),
),
],
)
// background: Image.asset(
// 'images/pobrane.png',
// fit: BoxFit.fill,
// ),
),
bottom: AppBar(
backgroundColor: Colors.white,
title: Row(
children: [
SizedBox(width: 400),
TextButton(
onPressed: () {
Scrollable.ensureVisible(
key1.currentContext!,
duration: Duration(milliseconds: 1000),
curve: Curves.ease,
);
},
child: Text(
'O MNIE',
selectionColor: Colors.black,
style: GoogleFonts.raleway(
color: Color.fromARGB(255, 83, 83, 83),
fontSize: 20,
),
),
),
TextButton(
onPressed: () {
Scrollable.ensureVisible(
key2.currentContext!,
duration: Duration(milliseconds: 1000),
curve: Curves.ease,
);
},
child: Text(
'USŁUGI',
style: GoogleFonts.raleway(
color: Color.fromARGB(255, 83, 83, 83),
fontSize: 20,
),
),
),
TextButton(
onPressed: () {
Scrollable.ensureVisible(
key3.currentContext!,
duration: Duration(milliseconds: 1000),
curve: Curves.ease,
);
},
child: Text(
'CENNIK',
style: GoogleFonts.raleway(
color: Color.fromARGB(255, 83, 83, 83),
fontSize: 20,
),
),
),
TextButton(
onPressed: () {
Scrollable.ensureVisible(
key4.currentContext!,
duration: Duration(milliseconds: 1000),
curve: Curves.ease,
);
},
child: Text(
'KONTAKT',
style: GoogleFonts.raleway(
color: Color.fromARGB(255, 83, 83, 83),
fontSize: 20,
),
),
)
],
),
),
),
];
},
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: [
Container(
key: key1,
color: Colors.grey,
height: bodyHeight,
width: bodyWidth,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Width: ${screenSize.width.toString()}'),
Text('Height: ${screenSize.height.toString()}'),
Text('Body Height: ${bodyHeight.toString()}'),
],
),
),
Divider(
height: 1,
color: Colors.transparent,
),
Container(
key: key2,
color: Colors.grey,
height: bodyHeight,
width: bodyWidth,
child: const Text('Container 2'),
),
Divider(
height: 1,
color: Colors.transparent,
),
Container(
key: key3,
color: Colors.grey,
height: bodyHeight,
width: bodyWidth,
child: const Text('Container 3'),
),
Divider(
height: 1,
color: Colors.transparent,
),
Container(
key: key4,
color: Colors.grey,
height: bodyHeight,
width: bodyWidth,
child: const Text('Container 4'),
),
],
),
),
),
),
);
}
}`
I was thinking to try it with TabBar instead off AppBar but I’m afraid the problem is hiding SliverAppBar.