bottom_sheet_stateful 0.1.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new78

Bottom Sheet Stateful #

This widget is implemented smooth stateful bottom sheet dragable with peek height and full height

Screenshoot #

<img src="https://raw.githubusercontent.com/tossaro/bottom_sheet_stateful/master/example/imgHeadView.png" width="200"/> <img src="https://raw.githubusercontent.com/tossaro/bottom_sheet_stateful/master/example/imgWidthView.png" width="200"/> <img src="https://raw.githubusercontent.com/tossaro/bottom_sheet_stateful/master/example/imgExtendView.png" width="200"/> <img src="https://raw.githubusercontent.com/tossaro/bottom_sheet_stateful/master/example/imgDecorationView.png" width="200"/> <img src="https://raw.githubusercontent.com/tossaro/bottom_sheet_stateful/master/example/imgMarginView.png" width="200"/>

Getting Started #

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

dependencies:
    bottom_sheet_stateful: ^0.1.1

2. You can install packages from the command line: #

$ flutter packages get

3. Now in your Dart code, you can use: #

import 'package:bottom_sheet_stateful/bottom_sheet_stateful.dart';

Example #

import 'package:flutter/material.dart';
import 'package:bottom_sheet_stateful/bottom_sheet_stateful.dart';
import 'package:flutter/cupertino.dart';

class IntroPage extends StatefulWidget {
  @override
  IntroState createState() => IntroState();
}

class IntroState extends State<IntroPage> {

  final _formKey = new GlobalKey<FormState>();

  BSAttribute bs1Attr;

  @override
  void initState() {
    super.initState();
    bs1Attr = BSAttribute();
  }

  void _bs1Callback(double width, double height) {
    print("bs1 callback-> width: ${width.toString()}, height: ${height.toString()}");
  }

  @override
  Widget build(BuildContext context) {
    var login = Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 70),
              child: Text('Login',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontFamily: "GTWalsheim-Medium",
                      fontSize: 30.0,
                      color: Colors.black
                  )
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 25),
              alignment: new FractionalOffset(0.5, 0.5),
              width: 330,
              child: Column(
                children: <Widget>[
                  Form(
                    key: _formKey,
                    child: Column(
                      children: <Widget>[
                        Container(
                            child: Theme(
                                data: new ThemeData(
                                  primaryColor: Colors.redAccent,
                                  primaryColorDark: Colors.red,
                                ),
                                child: TextFormField(
                                  keyboardType: TextInputType.emailAddress,
                                  style: TextStyle(
                                      fontFamily: "WorkSansSemiBold",
                                      fontSize: 16.0,
                                      color: Colors.black
                                  ),
                                  decoration: new InputDecoration(
                                      border: new OutlineInputBorder(
                                        borderRadius: const BorderRadius.all(
                                          const Radius.circular(25.0),
                                        ),
                                      ),
                                      prefixIcon: Icon(
                                        CupertinoIcons.person,
                                        size: 22.0,
                                        color: Colors.black,
                                      ),
                                      hintStyle: TextStyle(
                                          color: Colors.blueGrey,
                                          fontFamily: "WorkSansSemiBold", fontSize: 17.0
                                      ),
                                      hintText: "Email"
                                  ),
                                )
                            )
                        ),
                        Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 25.0, right: 25.0)),
                        Container(
                            child: Theme(
                                data: new ThemeData(
                                  primaryColor: Colors.redAccent,
                                  primaryColorDark: Colors.red,
                                ),
                                child: TextFormField(
                                  keyboardType: TextInputType.text,
                                  style: TextStyle(
                                      fontFamily: "WorkSansSemiBold",
                                      fontSize: 16.0,
                                      color: Colors.black
                                  ),
                                  decoration: new InputDecoration(
                                      border: new OutlineInputBorder(
                                        borderRadius: const BorderRadius.all(
                                          const Radius.circular(25.0),
                                        ),
                                      ),
                                      prefixIcon: Icon(
                                        CupertinoIcons.padlock,
                                        size: 22.0,
                                        color: Colors.black,
                                      ),
                                      hintStyle: TextStyle(
                                          color: Colors.blueGrey,
                                          fontFamily: "WorkSansSemiBold", fontSize: 17.0
                                      ),
                                      hintText: "Password"
                                  ),
                                )
                            )
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      margin: EdgeInsets.only(top: 10),
                      child: Text(
                          'Forget Password?',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: "GTWalsheim-Medium",
                              fontSize: 15.0,
                              color: Colors.red)
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      margin: EdgeInsets.only(top: 15),
                      child: GestureDetector(
                        onTap: () {},
                        child: Image(width: 60.0, height: 60.0, fit: BoxFit.fill, image: AssetImage('assets/images/btn_login.png')
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

    return BottomSheetStateful(
        callback: _bs1Callback,
        attribute: bs1Attr,
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/images/bg.png"), fit: BoxFit.cover),
          ),
          child: Container(
            margin: EdgeInsets.only(top: 130),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Default Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(showHead: false);
                            });
                          },
                          child: Text("Close Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  closeOnSwipeDown: false,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Fix Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  bodyWidget: login,
                                  closeOnSwipeDown: false,
                                  peekHeight: 100,
                                  maxHeight: 700,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Extendable Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  decoration: BoxDecoration(color: Colors.lightBlue),
                                  peekHeight: 100,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Decoration Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  bodyWidget: login,
                                  smoothness: 700,
                                  peekHeight: 250,
                                  maxHeight: MediaQuery.of(context).size.height,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Smoothness Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  margin: EdgeInsets.only(bottom: 100),
                                  bodyWidget: login,
                                  smoothness: 700,
                                  peekHeight: 300,
                                  maxHeight: MediaQuery.of(context).size.height - 50,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Margin Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  closeOnSwipeDown: false,
                                  peekHeight: 400,
                                  peekWidth: MediaQuery.of(context).size.width - 100,
                                  maxHeight: MediaQuery.of(context).size.height - 100,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Width Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
              ],
            ),
          ),
        )
    );
  }
}

[0.1.1] - Update state swith head and bosy

  • Refresh bottom sheet state every swap head and body.

[0.1.0] - Attributed bottom sheet

  • Simplify usage of all attribute for this widget.
  • Added example combination.

[0.0.5] - Smothness transition head to body widget

  • Change Container widget to SingleChildScrollView to make more smoth transition head to body or reverse.

example/main.dart

import 'package:flutter/material.dart';
import 'package:bottom_sheet_stateful/bottom_sheet_stateful.dart';
import 'package:flutter/cupertino.dart';

class IntroPage extends StatefulWidget {
  @override
  IntroState createState() => IntroState();
}

class IntroState extends State<IntroPage> {

  final _formKey = new GlobalKey<FormState>();

  BSAttribute bs1Attr;

  @override
  void initState() {
    super.initState();
    bs1Attr = BSAttribute();
  }

  void _bs1Callback(double width, double height) {
    print("bs1 callback-> width: ${width.toString()}, height: ${height.toString()}");
  }

  @override
  Widget build(BuildContext context) {
    var login = Container(
      child: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: 70),
              child: Text('Login',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontFamily: "GTWalsheim-Medium",
                      fontSize: 30.0,
                      color: Colors.black
                  )
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 25),
              alignment: new FractionalOffset(0.5, 0.5),
              width: 330,
              child: Column(
                children: <Widget>[
                  Form(
                    key: _formKey,
                    child: Column(
                      children: <Widget>[
                        Container(
                            child: Theme(
                                data: new ThemeData(
                                  primaryColor: Colors.redAccent,
                                  primaryColorDark: Colors.red,
                                ),
                                child: TextFormField(
                                  keyboardType: TextInputType.emailAddress,
                                  style: TextStyle(
                                      fontFamily: "WorkSansSemiBold",
                                      fontSize: 16.0,
                                      color: Colors.black
                                  ),
                                  decoration: new InputDecoration(
                                      border: new OutlineInputBorder(
                                        borderRadius: const BorderRadius.all(
                                          const Radius.circular(25.0),
                                        ),
                                      ),
                                      prefixIcon: Icon(
                                        CupertinoIcons.person,
                                        size: 22.0,
                                        color: Colors.black,
                                      ),
                                      hintStyle: TextStyle(
                                          color: Colors.blueGrey,
                                          fontFamily: "WorkSansSemiBold", fontSize: 17.0
                                      ),
                                      hintText: "Email"
                                  ),
                                )
                            )
                        ),
                        Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 25.0, right: 25.0)),
                        Container(
                            child: Theme(
                                data: new ThemeData(
                                  primaryColor: Colors.redAccent,
                                  primaryColorDark: Colors.red,
                                ),
                                child: TextFormField(
                                  keyboardType: TextInputType.text,
                                  style: TextStyle(
                                      fontFamily: "WorkSansSemiBold",
                                      fontSize: 16.0,
                                      color: Colors.black
                                  ),
                                  decoration: new InputDecoration(
                                      border: new OutlineInputBorder(
                                        borderRadius: const BorderRadius.all(
                                          const Radius.circular(25.0),
                                        ),
                                      ),
                                      prefixIcon: Icon(
                                        CupertinoIcons.padlock,
                                        size: 22.0,
                                        color: Colors.black,
                                      ),
                                      hintStyle: TextStyle(
                                          color: Colors.blueGrey,
                                          fontFamily: "WorkSansSemiBold", fontSize: 17.0
                                      ),
                                      hintText: "Password"
                                  ),
                                )
                            )
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      margin: EdgeInsets.only(top: 10),
                      child: Text(
                          'Forget Password?',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              fontFamily: "GTWalsheim-Medium",
                              fontSize: 15.0,
                              color: Colors.red)
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Container(
                      margin: EdgeInsets.only(top: 15),
                      child: GestureDetector(
                        onTap: () {},
                        child: Image(width: 60.0, height: 60.0, fit: BoxFit.fill, image: AssetImage('assets/images/btn_login.png')
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

    return BottomSheetStateful(
        callback: _bs1Callback,
        attribute: bs1Attr,
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/images/bg.png"), fit: BoxFit.cover),
          ),
          child: Container(
            margin: EdgeInsets.only(top: 130),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Default Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(showHead: false);
                            });
                          },
                          child: Text("Close Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  closeOnSwipeDown: false,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Fix Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  bodyWidget: login,
                                  closeOnSwipeDown: false,
                                  peekHeight: 100,
                                  maxHeight: 700,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Extendable Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  decoration: BoxDecoration(color: Colors.lightBlue),
                                  peekHeight: 100,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Decoration Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  bodyWidget: login,
                                  smoothness: 700,
                                  peekHeight: 250,
                                  maxHeight: MediaQuery.of(context).size.height,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Smoothness Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10.0, bottom: 10.0)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  margin: EdgeInsets.only(bottom: 100),
                                  bodyWidget: login,
                                  smoothness: 700,
                                  peekHeight: 300,
                                  maxHeight: MediaQuery.of(context).size.height - 50,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Margin Modal",style: TextStyle(fontSize: 21)),
                        )
                    ),
                    Container(
                        width: 170,
                        height: 70,
                        child: RaisedButton(
                          onPressed: () {
                            setState(() {
                              bs1Attr = BSAttribute(
                                  headWidget: login,
                                  closeOnSwipeDown: false,
                                  peekHeight: 400,
                                  peekWidth: MediaQuery.of(context).size.width - 100,
                                  maxHeight: MediaQuery.of(context).size.height - 100,
                                  showHead: true
                              );
                            });
                          },
                          child: Text("Width Modal",style: TextStyle(fontSize: 21)),
                        )
                    )
                  ],
                ),
              ],
            ),
          ),
        )
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  bottom_sheet_stateful: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:bottom_sheet_stateful/bottom_sheet_stateful.dart';
  
Version Uploaded Documentation Archive
0.1.1 Apr 7, 2019 Go to the documentation of bottom_sheet_stateful 0.1.1 Download bottom_sheet_stateful 0.1.1 archive
0.1.0 Apr 5, 2019 Go to the documentation of bottom_sheet_stateful 0.1.0 Download bottom_sheet_stateful 0.1.0 archive
0.0.5 Apr 4, 2019 Go to the documentation of bottom_sheet_stateful 0.0.5 Download bottom_sheet_stateful 0.0.5 archive
0.0.4 Apr 4, 2019 Go to the documentation of bottom_sheet_stateful 0.0.4 Download bottom_sheet_stateful 0.0.4 archive
0.0.3 Apr 3, 2019 Go to the documentation of bottom_sheet_stateful 0.0.3 Download bottom_sheet_stateful 0.0.3 archive
0.0.2 Apr 3, 2019 Go to the documentation of bottom_sheet_stateful 0.0.2 Download bottom_sheet_stateful 0.0.2 archive
0.0.1 Apr 3, 2019 Go to the documentation of bottom_sheet_stateful 0.0.1 Download bottom_sheet_stateful 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
56
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]
78
Learn more about scoring.

We analyzed this package on Apr 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/bottom_sheet_stateful.dart. (-0.50 points)

Analysis of lib/bottom_sheet_stateful.dart reported 1 hint:

line 230 col 8: Name non-constant identifiers using lowerCamelCase.

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
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test