fading_edge_scrollview 1.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

fading_edge_scrollview #

Package providing FadingEdgeScrollView which allows you to build scrollable views with fading edges

Usage #

Create FadingEdgeScrollView by calling one of constructors depending on your scroll view class. Unfortunately scrollable view don't share same interface so there are separate constructors for:

  • ScrollView (most scrollable views inherit from this class) FadingEdgeScrollView.fromScrollView
  • SingleChildScrollView FadingEdgeScrollView.fromSingleChildScrollView
  • PageViewFadingEdgeScrollView.fromPageView

View passed as child MUST have controller set. If you want this controller to be disposed when FadingEdgeScrollView is disposed you can pass shouldDisposeScrollController flag set as true to widget constructor.

See documentation and example folder for more information

Demo #

Click to see on Youtube:
ListView with images demo ListView demo PageView demo SingleChildScrollView demo

[1.1.4] - 29.06.2020. #

  • Fixed bug which happened when view is disposed earlier than PostFrameCallback happened

[1.1.3] - 19.06.2020. #

  • Added support for right to left text direction

[1.1.2] - 19.06.2020. #

  • Hiding fade if content too small to be scrollable (thanks to georgeherby and dannyalbuquerque)

[1.1.1] - 20.05.2020. #

  • Fixed unwanted scroll controller disposal. Added flag 'shouldDisposeScrollController' if it's still required

[1.1.0] - 13.01.2020. #

  • Added support for AnimatedList (thanks to davidmartos96)

[1.0.2] - 06.08.2019. #

  • documentation fixes

[1.0.1] - 06.08.2019. #

  • Fixed bug for situations where scroll controller was not attached to scrollview
  • added more examples

[1.0.0] - 20.07.2019. #

  • Initial publication

example/lib/main.dart

import 'package:example/lipsum.dart';
import 'package:fading_edge_scrollview/fading_edge_scrollview.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fading Edge ScrollView Example',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: ExamplesList(),
    );
  }
}

class ExamplesList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FadingEdgeScrollView examples'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            NavigatorButton(
              text: 'ListView',
              builder: (_) => ListViewScreen(),
            ),
            NavigatorButton(
              text: 'PageView (LTR)',
              builder: (_) => PageViewScreen(textDirection: TextDirection.ltr),
            ),
            NavigatorButton(
              text: 'PageView (RTL)',
              builder: (_) => PageViewScreen(textDirection: TextDirection.rtl),
            ),
            NavigatorButton(
              text: 'Long text',
              builder: (_) => LongTextScreen(),
            ),
            NavigatorButton(
              text: 'Cities images',
              builder: (_) => CitiesListView(),
            ),
          ],
        ),
      ),
    );
  }
}

class NavigatorButton extends StatelessWidget {
  final String text;
  final WidgetBuilder builder;

  NavigatorButton({
    @required this.text,
    @required this.builder,
  });

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(text),
      onPressed: () {
        Navigator.of(context).push(MaterialPageRoute(builder: builder));
      },
    );
  }
}

class ListViewScreen extends StatelessWidget {
  final _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example with ListView'),
      ),
      body: Container(
        color: Colors.greenAccent,
        child: FadingEdgeScrollView.fromScrollView(
          child: ListView.builder(
            controller: _controller,
            itemBuilder: (context, index) => ListTile(
                title: Text('Item #$index'),
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(
                      'https://images.freeimages.com/images/large-previews/848/a-cat-1313470.jpg'),
                )),
            itemCount: 30,
          ),
        ),
      ),
    );
  }
}

class PageViewScreen extends StatelessWidget {
  final TextDirection textDirection;

  const PageViewScreen({
    @required this.textDirection,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example with PageView'),
      ),
      body: Directionality(
        textDirection: textDirection,
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: FadingEdgeScrollView.fromPageView(
            child: PageView(
              children: <Widget>[
                Card(color: Colors.red),
                Card(color: Colors.green),
                Card(color: Colors.blue),
              ],
            ),
            gradientFractionOnStart: 0.1,
            gradientFractionOnEnd: 0.1,
          ),
        ),
      ),
    );
  }
}

class LongTextScreen extends StatelessWidget {
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example with long text'),
      ),
      body: FadingEdgeScrollView.fromSingleChildScrollView(
        child: SingleChildScrollView(
          controller: controller,
          child: Padding(padding: EdgeInsets.all(5), child: Text(lipsumText)),
        ),
      ),
    );
  }
}

class CitiesListView extends StatelessWidget {
  final _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Image.asset(
            'assets/world.jpeg',
            fit: BoxFit.fitHeight,
            height: MediaQuery.of(context).size.height,
          ),
          Center(
            child: Container(
              height: 400,
              child: FadingEdgeScrollView.fromScrollView(
                child: ListView(
                  controller: _scrollController,
                  children: [
                    'paris',
                    'rome',
                    'moscow',
                    'tokyo',
                  ]
                      .map((city) => Padding(
                            padding: EdgeInsets.all(12),
                            child: ClipRRect(
                              borderRadius: new BorderRadius.circular(20.0),
                              child: Image.asset('assets/$city.jpeg'),
                            ),
                          ))
                      .toList(),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


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

We analyzed this package on Jul 2, 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 [fading_edge_scrollview] that is in a package requiring null.

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