SliverAppBar widget and Attributes

The SliverAppBar widget in Flutter provides a flexible app bar that integrates with CustomScrollView. It's commonly used in scrollable views where the app bar should expand or contract as the user scrolls. The SliverAppBar allows for smooth and customizable transitions between different states.

Here are the primary attributes of the SliverAppBar widget along with examples:

1. expandedHeight (double):

   • The maximum height of the app bar when fully expanded.

     Example:

       SliverAppBar(
         expandedHeight: 200.0,
         // other attributes...
       )
     

2. flexibleSpace (Widget):

   • The widget to display within the flexible space of the app bar.

     Example:

       SliverAppBar(
         flexibleSpace: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
         // other attributes...
       )
     

3. floating (bool):

   • Whether the app bar should become a floating app bar when the user scrolls down.

     Example:

       SliverAppBar(
         floating: true,
         // other attributes...
       )
     

4. pinned (bool):

   • Whether the app bar should remain pinned at the top when the user scrolls.

     Example:

       SliverAppBar(
         pinned: true,
         // other attributes...
       )
     

5. snap (bool):

   • Whether the app bar should snap into view when the user scrolls up, only if floating is true.

     Example:

       SliverAppBar(
         floating: true,
         snap: true,
         // other attributes...
       )
     

6. stretch (bool):

   • Whether the app bar should stretch and contract as the user scrolls.

     Example:

       SliverAppBar(
         stretch: true,
         // other attributes...
       )
     

7. stretchConfigurations (List<StretchConfiguration>):

   • A list of configurations to customize the stretch behavior.

     Example:

       dartCopy codeSliverAppBar(
         stretch: true,
         stretchConfigurations: [
           StretchConfiguration(parallaxFactor: 0.5),
           StretchConfiguration(parallaxFactor: 0.3),
         ],
         // other attributes...
       )
     

Full Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar Example'),
                background: Image.network(
                  'https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w600/2023/10/free-images.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('List item $index'),
                  );
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This example demonstrates a simple Flutter application with a CustomScrollView containing a SliverAppBar and a SliverList. The SliverAppBar includes an expanded height, a flexible space with an image, and is set to remain pinned at the top while scrolling through a list of items. Adjust the attributes according to your specific design requirements.