Last active
October 29, 2025 15:32
-
-
Save BorisKest/b3a1557167deab731a1b3a8ba5b43ec2 to your computer and use it in GitHub Desktop.
Simple fixed first sliver example.
This file contains hidden or 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 'dart:ui' as ui; | |
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return const MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| home: SliversScreen(), | |
| ); | |
| } | |
| } | |
| /// {@template slivers_screen} | |
| /// SliversScreen widget demonstrating SliverPaintOrder behavior. | |
| /// {@endtemplate} | |
| class SliversScreen extends StatefulWidget { | |
| /// {@macro slivers_screen} | |
| const SliversScreen({ | |
| super.key, // ignore: unused_element_parameter | |
| }); | |
| @override | |
| State<SliversScreen> createState() => _SliversScreenState(); | |
| } | |
| /// State for widget SliversScreen. | |
| class _SliversScreenState extends State<SliversScreen> { | |
| final ScrollController _scrollController = ScrollController(); | |
| double _scrollOffset = 0.0; | |
| /* #region Lifecycle */ | |
| @override | |
| void initState() { | |
| super.initState(); | |
| _scrollController.addListener(_onScroll); | |
| } | |
| void _onScroll() { | |
| setState(() { | |
| _scrollOffset = _scrollController.offset; | |
| }); | |
| } | |
| @override | |
| void didUpdateWidget(covariant SliversScreen oldWidget) { | |
| super.didUpdateWidget(oldWidget); | |
| // Widget configuration changed | |
| } | |
| @override | |
| void didChangeDependencies() { | |
| super.didChangeDependencies(); | |
| // The configuration of InheritedWidgets has changed | |
| // Also called after initState but before build | |
| } | |
| @override | |
| void dispose() { | |
| _scrollController.dispose(); | |
| super.dispose(); | |
| } | |
| /* #endregion */ | |
| @override | |
| Widget build(BuildContext context) { | |
| final backgroundColorIntensity = (_scrollOffset / 500.0).clamp(0.0, 1.0); | |
| final backgroundColor = Color.lerp(Colors.grey[100]!, Colors.blue[50]!, backgroundColorIntensity); | |
| final blurAmount = (_scrollOffset / 100).clamp(0.0, 10.0); | |
| return Scaffold( | |
| backgroundColor: backgroundColor, | |
| body: CustomScrollView( | |
| paintOrder: SliverPaintOrder.lastIsTop, | |
| controller: _scrollController, | |
| physics: const BouncingScrollPhysics(), | |
| slivers: [ | |
| PinnedHeaderSliver( | |
| child: ImageFiltered( | |
| imageFilter: ui.ImageFilter.blur(sigmaX: blurAmount, sigmaY: blurAmount), | |
| child: Container( | |
| decoration: BoxDecoration(color: Colors.transparent), | |
| child: Padding( | |
| padding: const EdgeInsets.all(140.0), | |
| child: Column( | |
| children: [ | |
| Icon(Icons.info, size: 149, color: Colors.blueGrey), | |
| const SizedBox(height: 8), | |
| Text( | |
| 'Some text here... \nБлюр: ${blurAmount.toStringAsFixed(1)}', | |
| style: TextStyle(color: Colors.blueGrey[700], fontSize: 14), | |
| textAlign: TextAlign.center, | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ), | |
| ), | |
| SliverGrid( | |
| gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( | |
| crossAxisCount: 2, | |
| mainAxisSpacing: 8, | |
| crossAxisSpacing: 8, | |
| childAspectRatio: 1.5, | |
| ), | |
| delegate: SliverChildBuilderDelegate((context, index) { | |
| return Container( | |
| margin: const EdgeInsets.symmetric(horizontal: 8), | |
| decoration: BoxDecoration( | |
| color: Colors.orange[200 + (index % 4) * 100], | |
| borderRadius: BorderRadius.circular(12), | |
| ), | |
| child: Center( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| Icon(Icons.grid_view, size: 30, color: Colors.orange[800]), | |
| const SizedBox(height: 4), | |
| Text( | |
| 'Grid ${index + 1}', | |
| style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.orange[800]), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| }, childCount: 20), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment