drag_to_expand 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 55

drag_to_expand #

This widget is easy to use to create draggable panels.

Showcase which you can find in example

Using and description of arguments #

DragToExpandController _dragToExpandController;

@override
void initState() {
  // Controller is used for programmatically opening and closing widget. If you don't need this feature - dont' create it.
  _dragToExpandController = DragToExpandController();
  // controller has:
  //   bool get isOpened - return true if widget is opened and false if not
  //   set isOpened(bool v) - setter, will close/open if v doesn't equal to
  //     isOpened, if it is - will do nothing.
  //   toggle() - close/open widget depends on its status
  super.initState();
}
@override
dispose() {
  _dragToExpandController?.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.center,
          child: OutlineButton(
            onPressed: () => _dragToExpandController.isOpened = !_dragToExpandController.isOpened,
            child: Text('open/close programmatically'),
          )
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: DragToExpand(
            controller: _dragToExpandController, // controller

            // Min and max size is height or width - it depends on baseSide parameter.
            // For example if baseSide was set to bottom or top, then min and max size
            // will be responsible for height, otherwise - it will be width.

            // minimum size of widget, default and in most cases sould be 0,
            // use it when you want a part of widget to be visible in closed state (as a visual teaser for example)
            minSize: 0,

            // maximum size
            maxSize: MediaQuery.of(context).size.height * 0.3,

            // "Basis" of the widget where content will slide, can be top, bottom, left or right.
            baseSide: BaseSide.bottom,

            // If "true" - the widget will close and open on tap on draggable, otherwise user will have to drag to open
            toggleOnTap: true,

            // @required Widget inside GestureDetector used to open and close a child
            draggable: Center(child: Text('drag to open')),

            // If you want the draggable to be changed when it's opened - define this parameter, by default it's null.
            draggableWhenOpened: Center(child: Text('close')),

            // @required Just child
            child: Container(color: Colors.yellow),

            //
            clipOverflow: true,

            // animation duration
            animationDuration: 500,
          ),
        ),
      ],
    ),
  );
}

[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:drag_to_expand/drag_to_expand.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math' as math;


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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  DragToExpandController _dragToExpandController;
  DragToExpandController _dragToExpandController2;
  StreamController<String> bgImageStream;

  @override
  void initState() {
    _dragToExpandController = DragToExpandController();
    _dragToExpandController2 = DragToExpandController();

    bgImageStream = StreamController<String>();

    super.initState();
  }
  @override
  dispose() {
    _dragToExpandController.dispose();
    _dragToExpandController2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('drag_to_expand example'),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[

          StreamBuilder<String>(
            stream: bgImageStream.stream,
            initialData: 'https://picsum.photos/500?image=35',
            builder: (context, asyncSnapshot) {
              return Image.network(asyncSnapshot.data, fit: BoxFit.fill,);
            }
          ),


          Align(
            alignment: Alignment.topCenter,
            child: DragToExpand(
              controller: _dragToExpandController,
              minSize: 0,
              maxSize: 100,
              baseSide: BaseSide.top,
              toggleOnTap: true,
              draggable: Center(
                child: Container(
                  height: 50,
                  width: 60,
                  color: Colors.transparent,
                  child: Container(
                    margin: EdgeInsets.only(top: 10),
                    decoration: BoxDecoration(
                      color: Colors.black54,
                      borderRadius: BorderRadius.all(Radius.circular(20.0))
                    ),
                    child: Center(
                      child: Icon(
                        Icons.remove,
                        color: Colors.white,
                        size: 40,
                      )
                    )
                  ),
                ),
              ),
              child: Container(
                margin: EdgeInsets.only(top: 10),
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 8,
                  itemBuilder: (BuildContext ctxt, int index) {
                    int randomImage = math.Random().nextInt(100);
                    return GestureDetector(
                      onTap: () {
                        _dragToExpandController.isOpened = false;
                        _dragToExpandController2.isOpened = true;
                        bgImageStream.add('https://picsum.photos/500?image=$randomImage');
                      },
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 5),
                        child: ClipRRect(
                          borderRadius: new BorderRadius.circular(8.0),
                          child: Image.network('https://picsum.photos/150?image=$randomImage'),
                        )
                      )
                    );
                  }
                ),
              ),
            )
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: DragToExpand(
                controller: _dragToExpandController2,
                minSize: 0,
                maxSize: 330,
                baseSide: BaseSide.bottom,
                toggleOnTap: true,
                draggable: Container(
                  height: 40,
                  color: Colors.transparent,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black54,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(20.0)
                      )
                    ),
                    child: Center(
                      child: Text('Read about photo',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.grey[300],
                        ),
                      ),
                    )
                  ),
                ),
                draggableWhenOpened: Container(
                  height: 40,
                  color: Colors.transparent,
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black54,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(20.0)
                      )
                    ),
                    child: Center(
                      child: Text('Hide',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.grey[300],
                        ),
                      ),
                    )
                  ),
                ),
                child: Container(
                  padding: EdgeInsets.only(left: 15, right: 15, top: 15),
                  color: Colors.black45,
                  child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut '
                  + 'labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris '
                  + 'nisi ut aliquip ex ea commodo consequat. \n\n Duis aute irure dolor in reprehenderit in voluptate velit '
                  + 'esse cillum dolore eu fugiat nulla pariatur. \n\n'
                  + 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
                    style: TextStyle(
                      color: Colors.grey[300],
                    ),
                  )
                ),
              )
            ),
          ),

          Align(
            alignment: Alignment.centerRight,
            child: Container(
              height: 70,
              child: DragToExpand(
                minSize: 0,
                maxSize: 170,
                baseSide: BaseSide.right,
                toggleOnTap: true,
                // clipOverflow: false,
                draggable: Container(
                  color: Colors.transparent,
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    decoration: BoxDecoration(
                      color: Colors.black38,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(5),
                        bottomLeft: Radius.circular(5)
                      )
                    ),
                    child: Icon(Icons.share, color: Colors.blueAccent[100],)
                  ),
                ),
                child: Container(
                  color: Colors.black38,
                  padding: EdgeInsets.only(right: 15),
                  child: Flex(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Flexible(
                        flex: 1,
                        child: Icon(Icons.thumb_up, color: Colors.white,),
                      ),
                      Flexible(
                        flex: 1,
                        child: Icon(Icons.sms, color: Colors.white,),
                      ),
                      Flexible(
                        flex: 1,
                        child: Icon(Icons.not_listed_location, color: Colors.white,),
                      ),
                      Flexible(
                        flex: 1,
                        child: Icon(Icons.star, color: Colors.yellowAccent),
                      ),
                    ],
                  )
                )
              )
            ),
          ),


        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  drag_to_expand: ^0.0.1

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:drag_to_expand/drag_to_expand.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
17
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
84
Overall:
Weighted score of the above. [more]
55
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [drag_to_expand] that is in a package requiring null.

Health suggestions

Format lib/controller.dart.

Run flutter format to format lib/controller.dart.

Format lib/drag_to_expand.dart.

Run flutter format to format lib/drag_to_expand.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

The package description is too short. (-6 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

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