sliverbar_with_card 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 69

Card Sliver App Bar #

Pub Pull Requests are welcome Pull Requests are welcome Codemagic build status

A Flutter package to create a SliverAppBar with a Card.

Inspired by FaoB's Twitter Post design.

Showcase

Getting started #

Wrap your content with CardSliverAppBar and set your desired options:

Basic #

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png"),
        title: Text("The Walking Dead"),
        body: Container()
    )
  )
)

With options #

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png", fit: BoxFit.cover),
        title: Text("The Walking Dead",
            style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
        ),
        titleDescription: Text("Drama, Action, Adventure, Fantasy, \nScience Fiction, Horror, Thriller",
            style: TextStyle(color: Colors.black, fontSize: 11)
        ),
        card: AssetImage("assets/card.jpg"),
        backButton: true,
        backBottonColors: [Colors.white, Colors.black],
        action: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: 30.0,
          color: Colors.red,
          onPressed: (){},
        ),
        body: Container()
    )
  )
)

Options #

PropertyTypeDescriptionDefault
required heightDoubleThe height of background image-
required backgroundImageThe image of background-
required titleTextThe text of title-
required bodyWidgetThe body of this widget-
titleDescriptionTextThe short description of titlenull
backButtonBooleanIf has backButtonfalse
backButtonColorsListThe colors of backButton when open and closedColors.white
actionWidgetThe action between appBar and backgroundnull
cardImageProviderThe image of cardnull

0.1.4 #

  • Fix some issues about analysis.

0.1.3 #

  • Fix some issues about analysis.

0.1.2 #

  • Fix some issues about analysis.

0.1.0 #

  • First functional release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sliverbar_with_card/sliverbar_with_card.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: Example(),
    );
  }
}

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  
  bool favorito = false;
  bool expandText = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "CardSliverAppBar Example",
      home: Material(
        child: CardSliverAppBar(
          height: 300,
          background: Image.asset("assets/logo.png", fit: BoxFit.cover),
          title: Text("The Walking Dead", style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)),
          titleDescription: Text("Drama, Action, Adventure, Fantasy, \nScience Fiction, Horror, Thriller", style: TextStyle(color: Colors.black, fontSize: 11)),
          card: AssetImage("assets/card.jpg"),
          backButton: true,
          backBottonColors: [Colors.white, Colors.black],
          action: IconButton(
            onPressed: (){
              setState(() {
                favorito=!favorito;
              });
            },
            icon: favorito ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
            color: Colors.red,
            iconSize: 30.0,
          ),
          body: Container(
            alignment: Alignment.topLeft,
            color: Colors.white,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      _ratingIcon(Icon(Icons.star), Text("84%", style: TextStyle(fontWeight: FontWeight.bold))),
                      _ratingIcon(Icon(Icons.personal_video), Text("AMC", style: TextStyle(fontWeight: FontWeight.bold))),
                      _ratingIcon(Icon(Icons.people), Text("TV-MA", style: TextStyle(fontWeight: FontWeight.bold))),
                      _ratingIcon(Icon(Icons.av_timer), Text("45m", style: TextStyle(fontWeight: FontWeight.bold))),
                    ],
                  ),
                ),
                Divider(),
                Container(
                  height: expandText ? 145 : 65,
                  margin: EdgeInsets.only(left: 30, right: 30, top: 10),
                  child: InkWell(
                    onTap: (){
                      setState(() {
                      expandText=!expandText; 
                      });
                    },
                    child: Text("The series centers on sheriff's deputy Rick Grimes, who wakes up from a coma to discover the apocalypse. He becomes the leader of a group of survivours from the Atlanta, Georgia..\n"+
                    "region as they attempt to sustain themselves and protect themselves not only against attacks by walkers but by other groups of survivors willing to assure their longevity by any means necessary.")
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  margin: EdgeInsets.only(left: 30),
                  child: Text("Related shows", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                ),
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.symmetric(vertical: 10),
                  width: MediaQuery.of(context).size.width,
                  height: 120,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                      _exampleRelatedShow(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      )
    );
  }

  Widget _exampleRelatedShow(){
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 8, vertical: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(8)),
        color: Colors.grey,
      ),
      width: 80,
      height: 100,
    );
  }

  Widget _ratingIcon(Icon icon, Text text){
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50)),
              color: Colors.grey
            ),
            child: IconButton(
              onPressed: (){},
              icon: icon,
              color: Colors.white,
              iconSize: 30,
            ),
          ),
          Divider(),
          text
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sliverbar_with_card: ^0.1.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:sliverbar_with_card/sliverbar_with_card.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
38
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
69
Learn more about scoring.

We analyzed this package on Feb 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
build_runner any
flutter_test