pinnable_listview 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 58

PinnableListView #

A Flutter ListView widget that allows pinning a ListView child to the top of the list.

Demo #

Getting Started #

Define the list

  PinController pinController = PinController();

  @override
  Widget build(BuildContext context) {
      return PinnableListView(
          pinController: pinController,
          children: listOfWidgets
      );
  }

Then pin a widget with

  pinController.pin(index)

index meaning the child which you'd like to pin/unpin.

See the example app for more details.

Problems #

  • Calling setState on PinnableListView after it has changed will crash the list, because it will try to reload the original list.
  • Missing implementation for PinnableListView.builder.
  • Changing the size of a child after first build will crash the list, as the list calculates widget heights based on the render boxes at the beginning of the app.

[0.0.1] - 2.5.2020 #

  • Initial release

[0.1.0] - 11.5.2020 #

  • Changed example and PinController

[0.1.1] - 11.5.2020 #

  • Changed readme

[0.1.2] - 12.5.2020 #

  • Updated readme link

[0.1.3] - 13.5.2020 #

  • State of children is now persistent during scrolling

[0.1.4] - 17.5.2020 #

  • Added initiallyPinned property

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:pinnablelistview/pinnable_listview.dart';

void main() {
  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text("PinnableListView Examples"),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(text: "Example One"),
                Tab(text: "Example Two"),
                Tab(text: "Example Three")
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              ExampleOne(),
              ExampleTwo(),
              ExampleThree()
            ],
          ),
        ),
      ),
    );
  }
}

class ExampleOne extends StatelessWidget {
  /*
    demonstrates how to highlight the pinned widget
   */
  final PinController pinController = PinController();

  @override
  Widget build(BuildContext context) {
    return PinnableListView(
        pinController: pinController,
        children: Iterable<int>.generate(5)
            .map((i) => MyTile(
          i: i,
          pinController: pinController,
        )).toList());
  }
}

class MyTile extends StatefulWidget {
  final int i;
  final PinController pinController;

  MyTile({Key key, @required this.i, @required this.pinController})
      : super(key: key);

  MyTileState createState() => MyTileState();
}

class MyTileState extends State<MyTile> {
  /*
     create a class for your children in pinnablelistview, from where you can handle
     the state of each child
   */

  String text;

  @override
  Widget build(BuildContext context) {
    text = (widget.i * 5).toString();
    return Card(
      child: GestureDetector(
        child: Container(
            height: 50.0,
            color: Colors.blue[100 + widget.i * 100],
            child: Center(child: Icon(widget.i == widget.pinController.pinned ? Icons.star : Icons.star_border))),
        onTap: () {
          widget.pinController.pin(widget.i);
        },
      ),
    );
  }
}

class ExampleTwo extends StatelessWidget {
  /*
    an example that uses a larger list, with differing widget sizes
   */
  final PinController pinController = PinController();

  getRandomNum() {
    return Random.secure().nextInt(50);
  }

  @override
  Widget build(BuildContext context) {
    return PinnableListView(
      pinController: pinController,
      children: Iterable.generate(100).map((i) {
        double height = 50.0 + getRandomNum();
        return Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black
            )
          ),
          height: height,
          child: Center(
            child: ListTile(
              leading: FlatButton(
                color: Colors.blue,
                child: Text("pin/unpin"),
                onPressed: () {
                  pinController.pin(i);
                },
              ),
              title: Text(i.toString()),
            ),
          ),
        );
      }).toList(),
    );
  }
}

class ExampleThree extends StatelessWidget {
  /*
    an example that uses the initially pinned property
   */
  final PinController pinController = PinController();

  getRandomNum() {
    return Random.secure().nextInt(50);
  }

  @override
  Widget build(BuildContext context) {
    return PinnableListView(
      initiallyPinned: 3,
      pinController: pinController,
      children: Iterable.generate(10).map((i) {
        return ListTile(
          leading: FlatButton(
            color: Colors.blue,
            child: Text("pin/unpin"),
            onPressed: () {
              pinController.pin(i);
            },
          ),
          title: Text(i.toString()),
        );
      }).toList(),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  pinnable_listview: ^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:pinnable_listview/pinnable_listview.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
16
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]
58
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 [pinnable_listview] that is in a package requiring null.

Health suggestions

Format lib/pinnable_listview.dart.

Run flutter format to format lib/pinnable_listview.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.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