I'm creating a Website and would want to have like a SliverAppBar oder a SliverPersistentHeader with an Image Carousel. That I can totally make, but I don't want the Image Carousel to shrink, when im scrolling down. Instead I would want the SliverAppBar to disappear but without the width getting smaller, but instead just the height getting smaller. I hope that my problem is clear. If there are any questions, please ask. Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter_app/Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/TopNavBar.dart';
//import 'package:flutter_app/Widgets/HomePageWidgets/HomePageImage.dart';
import '../Widgets/GlobalWidgets/BottomBar.dart';
import '../Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/OneCard.dart';
import '../Widgets/GlobalWidgets/TwoCards.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Material(
child: Container(
child: CustomScrollView (
slivers: [
// HomePageImage(), //wurde durch ImageCarousel() ersetzt
SliverAppBar(
expandedHeight: screenSize.height * 0.9,
backgroundColor: Colors.white.withOpacity(1),
flexibleSpace: ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN,
),
SliverList(delegate: SliverChildListDelegate([
//ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN
Expanded(
child: Container(
child: Row(
// Die Row mache ich nur hin, damit ich die Seite zentrieren kann. Wenn alles nach links soll, dann einfach Row entfernen
mainAxisAlignment: MainAxisAlignment.center,
children: [
TopNavBar(),
],
),
),
), //TopNavBar // TODO 1: DropDownButton muss noch erstellt werden // TODO 2: Funktionen zu den Buttons müssen hinzufügt werden
OneCard(),
Container(height: 1000,
width: 500,),
BottomBar(), // TODO 3: Funktionen zu den Buttons müssen hinzufügt werden
]))
],
),
),
);
}
}
This is my Image Carousel:
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
// https://pub.dev/packages/carousel_slider Link zum Package
class ImageCarousel extends StatefulWidget {
@override
_ImageCarouselState createState() => _ImageCarouselState();
}
class _ImageCarouselState extends State<ImageCarousel> {
List imgList = [
'assets/images/Mathildedoppelt.jpeg',
'assets/images/reveuse2.jpeg',
];
@override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: screenSize.height * 0.9, //Ich kann hier einfach * 1.2 rechnen und dann füllt es den ganzen Bildschirm aus
aspectRatio: 16/9,
viewportFraction: 1,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: false, // AUTOPLAY MUSS UNBEDINGT AN
autoPlayInterval: Duration(seconds: 6),
autoPlayAnimationDuration: Duration(seconds: 3),
enlargeCenterPage: false,
scrollDirection: Axis.horizontal,
),
items: imgList
.map((item) => Container(
child: Center(
child: Image.network(
item,
fit: BoxFit.cover,
height: height,
)),
))
.toList(),
);
}
}
This is the code with the SliverPersistentHeader:
import 'package:flutter/material.dart';
import 'package:flutter_app/Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/TopNavBar.dart';
//import 'package:flutter_app/Widgets/HomePageWidgets/HomePageImage.dart';
import '../Widgets/GlobalWidgets/BottomBar.dart';
import '../Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/OneCard.dart';
import '../Widgets/GlobalWidgets/TwoCards.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Material(
child: Container(
child: CustomScrollView (
slivers: [
// HomePageImage(), //wurde durch ImageCarousel() ersetzt
/*SliverAppBar(
expandedHeight: screenSize.height * 0.9,
backgroundColor: Colors.white.withOpacity(1),
flexibleSpace: ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN,
),*/
SliverPersistentHeader(
delegate: MyDynamicHeader(),
),
SliverList(delegate: SliverChildListDelegate([
//ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN
Expanded(
child: Container(
child: Row(
// Die Row mache ich nur hin, damit ich die Seite zentrieren kann. Wenn alles nach links soll, dann einfach Row entfernen
mainAxisAlignment: MainAxisAlignment.center,
children: [
TopNavBar(),
],
),
),
), //TopNavBar // TODO 1: DropDownButton muss noch erstellt werden // TODO 2: Funktionen zu den Buttons müssen hinzufügt werden
OneCard(),
SizedBox(height: 20,),
TwoCards(),
Container(height: 1000,
width: 500,),
BottomBar(), // TODO 3: Funktionen zu den Buttons müssen hinzufügt werden
]))
],
),
),
);
}
}
class MyDynamicHeader extends SliverPersistentHeaderDelegate {
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return ImageCarousel();
}
@override
bool shouldRebuild(SliverPersistentHeaderDelegate _) => true;
@override
double get maxExtent => 650.0;
@override
double get minExtent => 0.0;
}
ImageCarousel
?SliverPersistentHeader
? But I can't find any implementation on your code like extendingSliverPersistentHeaderDelegate
.SliverPersistentHeader
, do you want to fill width with image? also if you check controlling image size totally depend onaspectRatio
ofCarouselSlider
.