floating_pullup_card 0.1.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 78

floating_pullup_card #

A beautiful and custom floating pull up style Card for flutter

💻 Installation #

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  floating_pullup_card: <latest version>

Usage #

Basic #

You can get started really simple, just add

Basic Collapsed Basic Uncollapsed

FloatingPullUpCardLayout(
    child: Container(
        decoration: BoxDecoration(color: Colors.purple[100]),
        child: Placeholder(),
    ),
    body: Column(
        children: <Widget>[
            PlaceholderLines(
                count: 10,
                align: TextAlign.center,
            ),
        ],
    ),
),

where body is a Widget that is nested inside the card and child is the main layout content

Advanced #

You can highly customize by defining custom builders, or properties as width , height, color, etc

Advanced Collapsed Advanced Uncollapsed

FloatingPullUpCardLayout(
        dismissable: _dismissable,
        state: _floatingCardState,
        dragHandleBuilder: _customDragHandle ? _customDragHandleBuilder : null,
        cardBuilder: _customCard ? _customCardBuilder : null,
        collpsedStateOffset:
            _customCollapsedOffset ? (maxHeight, _) => maxHeight * .75 : null,
        autoPadding: _autoPadd,
        body: Container(
          // padding: EdgeInsets.all(16),
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                PlaceholderLines(
                  count: 4,
                  align: TextAlign.center,
                ),
                /// ... more content
              ],
            ),
          ),
        ),
        child: Container(
          decoration: BoxDecoration(color: Colors.grey[300]),
          height: double.infinity,
          width: double.infinity,
          child: SingleChildScrollView(
            child: // ... Some content
            ),
          ),
        ),

For more info, please check the demo provided :)

Full API #

/// The [Widget] to be used as the content of the main layout, not the card content
  final Widget child;

  /// The [Widget] to be used as the content of the floating card
  final Widget body;

  /// Set a custom [height] for the floating card,
  /// defaults to `86%` of total height of parent container or screen height if no finite height can be assumed
  final double height;

  /// Set a custom [width] for the floating card,
  /// defaults to `100%` of total width of parent container or screen width if no finite width can be assumed
  final double width;

  /// Set a [cardElevation] for the material,
  /// defaults to `4`
  final double cardElevation;

  /// If true , the card can be dragged until it's hidden from screen
  /// defaults to [false]
  final bool dismissable;

  /// Sets the [state] of the floating card,
  /// See enum [FloatingPullUpState] for more details
  /// Defaults to [FloatingPullUpState.collapsed]
  final FloatingPullUpState state;

  /// Set a custom card [color] to the card background
  /// defaults to [Colors.white]
  ///
  /// This doesnt take any effect if using [cardBuilder] is defined
  final Color cardColor;

  /// Called each time the [FloatingPullUpState] is changed
  final ValueChanged<FloatingPullUpState> onStateChange;

  /// Defines a custom [dragHandleBuilder]
  final DragHandleBuilder dragHandleBuilder;

  /// Defines a custom [cardBuilder]
  final FloatingCardBuilder cardBuilder;

  /// Set a custom [borderRadius] of the default Card material
  ///
  /// This doesnt take any effect if using [cardBuilder] is defined
  final BorderRadius borderRadius;

  /// if true , this automatically adds padding to the [child] container,
  /// avoiding the card to float on top of [child] content
  /// defaults to [true]
  final autoPadding;

  /// Sets a custom function that return a custom `Y Offset`  for state [FloatingPullUpState.collapsed]
  /// Please take into account that offset start from top to bottom
  StateOffsetFunction collpsedStateOffset;

  /// Sets a custom function that return a custom `Y Offset`  for state [FloatingPullUpState.hidden]
  /// Please take into account that offset start from top to bottom
  StateOffsetFunction hiddenStateOffset;

  /// Sets a custom function that return a custom `Y Offset`  for state [FloatingPullUpState.uncollapsed]
  /// Please take into account that offset start from top to bottom
  StateOffsetFunction uncollpsedStateOffset;

  /// Defines a callback to be called when a user taps outside the card
  /// If function returns [FloatingPullUpState] it will change state to the returned one
  /// Take into account that this is not getting called if a widget inside body is already handling a `Gesture`
  final FloatingPullUpState Function() onOutsideTap;

  /// If true, this will show an overlay behind the card tht obscures content behind
  /// Defaults to[false]
  final bool withOverlay;

  /// Defines the `color` of the overlay , this only takes effect of [withOverlayOption] is true
  final Color overlayColor;

More Screenshots #

AdvancedAdvanced GIF

Getting Started #

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[0.1.6] - 26/03/20. #

  • Improvements, fix function reference comparation when looking for widget update

[0.1.5] - 25/03/20. #

  • Added Overlay capablity

[0.1.4] - 20/03/20. #

  • Fix some imports

[0.1.3] - 20/03/20. #

  • Added new [onOutsideTap] property which defines a callback for outside card tap gestures, it also can make the state change if returning [FloatingPullUpState]

[0.1.2] - 4/02/20. #

  • Removed debug code

[0.1.1] - 4/02/20. #

  • Added example.
  • Added docs

[0.1.0] - 31/01/20. #

  • Initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'basic_screen.dart';
import 'advanced_screen.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: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("Basic Example"),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                  return BasicScreen();
                }));
              },
            ),
            RaisedButton(
              child: Text("Advanced Example"),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                  return AdvancedScreen();
                }));
              },
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  floating_pullup_card: ^0.1.6

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:floating_pullup_card/floating_pullup_card.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
99
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 Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

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

Health suggestions

Fix lib/pullup_card.dart. (-1 points)

Analysis of lib/pullup_card.dart reported 2 hints:

line 1 col 8: Unused import: 'dart:math'.

line 4 col 8: Unused import: 'package:floating_pullup_card/floating_pullup_card.dart'.

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

Analysis of lib/floating_layout.dart reported 1 hint:

line 8 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: FloatingPullUpCardLayout.collpsedStateOffset, FloatingPullUpCardLayout.hiddenStateOffset, FloatingPullUpCardLayout.uncollpsedStateOffset

Format lib/animated_translate.dart.

Run flutter format to format lib/animated_translate.dart.

Format lib/floating_pullup_card.dart.

Run flutter format to format lib/floating_pullup_card.dart.

Format lib/types.dart.

Run flutter format to format lib/types.dart.

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
flutter_test