How to apply Sliverappbar class code to Flutter

Asked

Viewed 38 times

0

I found in Flutter’s documentation the Sliverappbar. However, as I am starting with Flutter, I have doubts about how and where to insert the code within my project in Flutter. Should I create a specific class for him, or should I insert into the "main.Dart"? Thanks.

flutter dart

  • In Flutter you can program everything in one file, create everything in one structure... But following good practices, it is good you create a class apart, with your SliveAppBar and then make her call wherever she needs it, be at main.Dart or on another screen... I advise you to take a look at these two playlists Flutter Guide and in that other Pokedex

  • With these two playlists you will get a good start on Flutter

  • Beauty. Thank you very much!

1 answer

1


    /* **************
                 * START***
************** */

import 'package:flutter/material.dart';

/// Sliver app bars are typically used as the first child of a CustomScrollView, which lets the app bar integrate
/// with the scroll view so that it can vary in height according to the scroll offset or float above the other
/// content in the scroll view.
class LSliverAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            backgroundColor: Colors.blue,
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Demo Appbar'),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('List Item $index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

/* **************
***************
***************
              * END***
***************
***************
************** */

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.