SilverAppBar and SliverFab In Flutter

SilverAppBar and SliverFab In Flutter :

SilverAppBar and SliverFab In Flutter

Widget Package :

custom_page.dart

import 'dart:async';
import 'package:flutter/material.dart';

class SliverPage extends StatelessWidget {
  final String title;
  final Widget header;
  final ScrollController controller;
  final List<Widget> body, actions;
  final Map<String, String> popupMenu;

  const SliverPage({
    @required this.title,
    @required this.header,
    @required this.body,
    this.controller,
    this.actions,
    this.popupMenu,
  });

  factory SliverPage.slide({
    @required String title,
    @required List slides,
    @required List<Widget> body,
    List<Widget> actions,
    Map<String, String> popupMenu,
  }) {
    return SliverPage(
      title: title,
      header: Container(color: Colors.blue),
      body: body,
      actions: actions,
      popupMenu: popupMenu,
    );
  }

  factory SliverPage.display({
    @required ScrollController controller,
    @required String title,
    @required double opacity,
    @required Widget counter,
    @required List slides,
    @required List<Widget> body,
    List<Widget> actions,
    Map<String, String> popupMenu,
  }) {
    return SliverPage(
      controller: controller,
      title: title,
      header: Stack(alignment: Alignment.center, children: <Widget>[
        Opacity(
          opacity: opacity,
          child: Text('Header Page'),
        ),
        counter,
      ]),
      body: body,
      actions: actions,
      popupMenu: popupMenu,
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
        key: PageStorageKey(title),
        controller: controller,
        slivers: <Widget>[
          SliverBar(title: title, header: header, actions: <Widget>[]),
          ...body,
        ]);
  }
}

class SliverBar extends StatelessWidget {
  static const double heightRatio = 0.3;

  final String title;
  final Widget header;
  final num height;
  final List<Widget> actions;

  const SliverBar({
    this.title,
    this.header,
    this.height = heightRatio,
    this.actions,
  });

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
        expandedHeight: MediaQuery.of(context).size.height * height,
        actions: actions,
        floating: false,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: ConstrainedBox(
              constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width * 0.55,
              ),
              child: Text(title,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  maxLines: 1,
                  style: TextStyle(fontFamily: 'ProductSans', shadows: <Shadow>[
                    Shadow(
                      offset: Offset(0, 0),
                      blurRadius: 4,
                      color: Theme.of(context).primaryColor,
                    )
                  ]))),
          background: header,
        ));
  }
}

list_cell.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:row_collection/row_collection.dart';

class ListCell extends StatelessWidget {
  final Widget leading, trailing;
  final String title, subtitle;
  final VoidCallback onTap;
  final EdgeInsets contentPadding;

  const ListCell({
    this.leading,
    this.trailing,
    @required this.title,
    this.subtitle,
    this.onTap,
    this.contentPadding = const EdgeInsets.symmetric(
      horizontal: 16,
    ),
  });

  factory ListCell.svg({
    @required BuildContext context,
    @required String image,
    Widget trailing,
    @required String title,
    String subtitle,
    VoidCallback onTap,
  }) {
    return ListCell(
      leading: SvgPicture.asset(
        image,
        colorBlendMode: BlendMode.srcOver,
        width: 40,
        height: 40,
        color: Theme.of(context).brightness == Brightness.light
            ? Colors.black45
            : null,
      ),
      trailing: trailing,
      title: title,
      subtitle: subtitle,
      onTap: onTap,
    );
  }

  factory ListCell.icon({
    @required IconData icon,
    Widget trailing,
    @required String title,
    String subtitle,
    VoidCallback onTap,
  }) {
    return ListCell(
      leading: Icon(icon, size: 40),
      trailing: trailing,
      title: title,
      subtitle: subtitle,
      onTap: onTap,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: leading,
      title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              title,
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.bold,
              ),
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
            if (subtitle != null) Separator.spacer(space: 4),
          ]),
      subtitle: subtitle == null
          ? null
          : Text(
              subtitle,
              style: TextStyle(
                fontSize: 15,
                fontFamily: 'ProductSans',
                color: Theme.of(context).textTheme.caption.color,
              ),
            ),
      trailing: trailing,
      contentPadding: contentPadding,
      onTap: onTap,
    );
  }
}

Outside Widget Package :

home.dart

import 'package:custom_silverbar/widget/custom_page.dart';
import 'package:flutter/material.dart';
import 'package:row_collection/row_collection.dart';
import 'widget/list_cell.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SliverPage.slide(title: 'Custom SilverApp Bar', slides: null, body: <Widget>[
      SliverList(
          delegate: SliverChildBuilderDelegate(
        _buildVehicle,
        childCount: 12,
      ))
    ]));
  }

  Widget _buildVehicle(BuildContext context, int index) {
    return Column(children: <Widget>[
      ListCell(
        leading: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
        title: 'Flutter Tutorial',
        subtitle: 'Custom SilverApp',
        trailing: Icon(Icons.chevron_right),
        onTap: () {

        }
      ),
      Separator.divider(indent: 75)
    ]);
  }
}

silver_fab.dart

import 'package:flutter/material.dart';
import 'package:row_collection/row_collection.dart';
import 'package:sliver_fab/sliver_fab.dart';

import 'widget/custom_page.dart';
import 'widget/list_cell.dart';

class SilverFabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliverFab(
        floatingWidget: SafeArea(
          top: false,
          bottom: false,
          left: false,
          child: FloatingActionButton(
            heroTag: null,
            onPressed: () {},
            child: Icon(Icons.ondemand_video),
          ),
        ),
        expandedHeight: MediaQuery.of(context).size.height * 0.3,
        slivers: <Widget>[
          SliverBar(title: 'Sliver Fab', actions: <Widget>[
            IconButton(icon: Icon(Icons.share), onPressed: () {})
          ]),
          SliverSafeArea(
            top: false,
            sliver: SliverToBoxAdapter(
              child: RowLayout.cards(children: <Widget>[
                Column(children: <Widget>[
                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                            const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75),

                  ListCell(
                      leading: ClipRRect(
                        borderRadius:
                        const BorderRadius.all(Radius.circular(8)),
                      ),
                      title: 'Flutter Tutorial',
                      subtitle: 'Custom SilverApp',
                      trailing: Icon(Icons.chevron_right),
                      onTap: () {}),
                  Separator.divider(indent: 75)
                ])
              ]),
            ),
          ),
        ],
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'home.dart';
import 'silver_fab.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SilverFabPage(),
    );
  }
}

pubspec.yaml

name: custom_silverbar
description: A new Flutter application.
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  flutter_svg:
  row_collection:
  sliver_fab:

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in