hanginglist 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 70

Hanginglist #

A Flutter library to create a HangingList with animation on scrolling. You can also create HangingItems which you can rotate like a hanger and play with their flip property. The idea is taken from hanging clothes in almirah.

Hanging List Demo Flip Item Demo

Hanging List Demo Video

Getting Started #

1. Add dependency to your pubspec.yaml

dependencies:
  hanginglist: ^0.1.1

2. Import it

import 'package:hanginglist/hanginglist.dart'

3. Use it. See the examples folder for an ... example.

Parameters #

    @required this.list; //list of items
    @required this.frontSide; //widget to show on front side of card
    @required this.backSide;  //widget to show on back side of card
    @required this.moveList;  // bool value whether to move whole list with animation
    @required this.moveListItem;  // bool value whether to move list item with animation
    @required this.height; //height of card
    @required this.width;  //width of card

HangingList<T> is a widget which builds list of cards.

HangingList({
    @required this.list,
    @required this.frontSide,
    @required this.backSide,
    @required this.moveList,
    @required this.moveListItem,
    @required this.height,
    @required this.width,
  });

Example #

//Initialise the HangingList widget where you want to use it.
HangingList<HangingObject>(
        list: list,
        frontSide: frontSide,
        backSide: backSide,
        moveList: true,
        moveListItem: true,
        height: screenHeight / 2,
        width: screenWidth / 1.3,
      ),

// create a generic function frontSide which excepts the type of list you want in <Object> parameters and return the widget you want to show in the card.

Widget frontSide<HangingObject>(obj) {
    return yourWidget();
}
// Similarly create backSide which will show when you flip the card.
Widget backSide<HangingObject>(obj) {
    return yourWidget();
}
// Also do not forget to initialise the list with type params.
List<HangingObject> list = [
    HangingObject(
        'Chicken',
        'McDonald`s',
        ['Chicken McNuggets', 'Big Mac', 'Fries'],
        'Fusion Mall,2ndStage, Kormangala',),
    HangingObject(
        'Burger',
        'Taco Bell',
        ['Doritos Locos Tacos', 'Freezes', 'Nacho Fries', 'The Meximelt'],
        'Ashwini Complex, Indranagar',)];

This package is currently in development. To enjoy all the features you can edit this package.

FAQ #

Q: How can I change PageView Builder to ListViewBuilder ?

A: Go to HangingList widget and chage PageView builder to list view builder and change PageController to ScrollController.

##

Q: How can I add more gestures to List Items ?

A: Go to HangingList widget > HangingItem widget and in gestureDetector add your own gesture functionalities.

##

Q: How can I change List Item decoration ?

A: Go to the HangingItem widget > Animation Card widget > HangTransform widget and add your decoration there.

[0.1.1]: Dec 19, 2019. #

  • PageView builder flickering bug fixed.

example/lib/main.dart

import 'package:flutter/material.dart';
// import your package here
import 'package:hanginglist/hanginglist.dart';
import './model/hangingObj.dart';

void main() => runApp(MaterialApp(
      title: 'TASTYBURGER',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: MyStateWidget(),
    ));

class MyStateWidget extends StatelessWidget {
  double screenWidth, screenHeight;

  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQueryData = MediaQuery.of(context);
    screenWidth = mediaQueryData.size.width;
    screenHeight = mediaQueryData.size.height;
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'HANGINGLIST',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
          textAlign: TextAlign.center,
        ),
        actions: <Widget>[
          Icon(Icons.fastfood),
          Padding(
            padding: EdgeInsets.all(5),
          )
        ],
      ),
      // Define the HangingList Widget and do not forget to initialise all fields
      body: HangingList<HangingObject>(
        list: list,
        frontSide: frontSide,
        backSide: backSide,
        moveList: true,
        moveListItem: true,
        height: screenHeight / 2,
        width: screenWidth / 1.3,
      ),
    );
  }

// Create a generic function which returns the frontSide widget of the card
  Widget frontSide<HangingObject>(obj) {
    return Container(
        padding: EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Text(
                obj.restaurantName,
                style: TextStyle(fontSize: 30, color: Color(0xffb71c1c)),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            SizedBox(
                width: 200,
                child: RaisedButton(
                  color: Color(0xffffab40),
                  onPressed: () {},
                  child: Text(
                    'Add to your order',
                    style: TextStyle(color: Colors.white),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(18.0),
                      side: BorderSide(color: Color(0xffff6d00))),
                ))
          ],
        ));
  }

// Create a generic function which returns the backSide widget of the card
  Widget backSide<HangingObject>(obj) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: Text(obj.restaurantName,
                style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.w600,
                    color: Color(0xffb71c1c))),
          ),
          SizedBox(
            height: 10,
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text('Dishes:',
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.brown,
                    fontWeight: FontWeight.w600)),
          ),
          ListView.builder(
            shrinkWrap: true,
            itemCount: obj.dishes.length,
            itemBuilder: (BuildContext context, int i) {
              return Text(obj.dishes[i], style: TextStyle(fontSize: 16));
            },
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text('Location:',
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.brown,
                    fontWeight: FontWeight.w600)),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text(obj.location),
          ),
          SizedBox(
            height: 10,
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text('Contact:',
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.brown,
                    fontWeight: FontWeight.w600)),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text(obj.contact),
          ),
          SizedBox(
            height: 10,
          ),
          SizedBox(
              width: 200,
              child: RaisedButton(
                color: Color(0xffffab40),
                onPressed: () {},
                child: Text(
                  'ORDER NOW',
                  style: TextStyle(color: Colors.white),
                ),
                shape: RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(18.0),
                    side: BorderSide(color: Color(0xffff6d00))),
              ))
        ],
      ),
    );
  }

// Create a list of objects which hold your desired data and also not forget to define your model
  List<HangingObject> list = [
    HangingObject(
        'Chicken',
        'chicken',
        'McDonald`s',
        ['Chicken McNuggets', 'Big Mac', 'Fries'],
        'Fusion Mall,2ndStage, Kormangala',
        '1860 210 0000, 080 3399 4444'),
    HangingObject(
        'Burger',
        'burger',
        'Taco Bell',
        ['Doritos Locos Tacos', 'Freezes', 'Nacho Fries', 'The Meximelt'],
        'Ashwini Complex, Indranagar',
        '1860 210 0000, 080 3399 4444'),
    HangingObject(
        'Pizza',
        'pizza',
        'KFC',
        [
          'Boneless Wings',
          'Extra Crispy Strips',
          'Extra Crispy Chicken',
          'Hot Wings'
        ],
        'BDA Complex HSR',
        '1860 210 0000, 080 3399 4444'),
    HangingObject(
        'Fries',
        'fries',
        'Burger King',
        ['Whopper Jr. Sandwich', 'HamBurger', 'Veggie Burger', 'TENDERGRILL'],
        'Bull Temple Road, Basavanagudi',
        '1860 210 0000, 080 3399 4444'),
    HangingObject(
        'Coke',
        'coke',
        'Subway',
        [
          'Rotisserie-Style Chicken',
          'Veggie Delite',
          'Meatball Marinara',
          'Meatball Marinara'
        ],
        'Fusion Mall,2ndStage, Kormangala',
        '1860 210 0000, 080 3399 4444'),
    HangingObject(
        'Sandwich',
        'sandwich',
        'StarBucks',
        ['Cake pops', 'Pumpkin bread, Greek yogurt, Bacon'],
        'Orion East, Banaswadi',
        '1860 210 0000, 080 3399 4444')
  ];
}

Use this package as a library

1. Depend on it

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


dependencies:
  hanginglist: ^0.1.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:hanginglist/hanginglist.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
40
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]
70
Learn more about scoring.

We analyzed this package on Mar 31, 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

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