linked_scroll_widgets 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 66

Language: English | 中文简体

linked_scroll_widgets #

A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Get started with an simple example: #

  • LinkedOpacityWidget:

class LinkedOpacityPage extends StatefulWidget {
  @override
  _LinkedOpacityPageState createState() => _LinkedOpacityPageState();
}

class _LinkedOpacityPageState extends State<LinkedOpacityPage> {
  ScrollController controller;

  @override
  void initState() {
    super.initState();
    controller = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: LinkedOpacityWidget(
          child: Text("透明会变的哦"),
          scrollController: controller,
        ),
      ),
      body: ListView.builder(
        controller: controller,
        padding: EdgeInsets.only(),
        itemCount: 40,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(left: 20, top: 20),
            child: Text('$index', style: TextStyle(fontSize: 25)),
          );
        },
      ),
    );
  }
}
  • LinkedSizeWidget:

class LinkedSizePage extends StatefulWidget {
  @override
  _LinkedSizePageState createState() => _LinkedSizePageState();
}

class _LinkedSizePageState extends State<LinkedSizePage> {
  ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Container(
          decoration: BoxDecoration(
            color: Colors.deepOrange,
            borderRadius: BorderRadius.circular(6),
          ),
          child: LinkedSizeWidget(
            child: Text("size会变的哦"),
            finalWidth: 300,
            scrollController: scrollController,
            originalWidth: 100,
          ),
        ),
      ),
      body: ListView.builder(
        controller: scrollController,
        padding: EdgeInsets.only(),
        itemCount: 40,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(left: 20, top: 20),
            child: Text('$index', style: TextStyle(fontSize: 25)),
          );
        },
      ),
    );
  }
}
  • LinkedOffsetWidget:

class LinkedOffsetPage extends StatefulWidget {
  @override
  _LinkedOffsetPageState createState() => _LinkedOffsetPageState();
}

class _LinkedOffsetPageState extends State<LinkedOffsetPage> {
  ScrollController scrollController;

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: LinkedOffsetWidget(
          child: Text("offset会变的哦"),
          scrollController: scrollController,
        ),
      ),
      body: ListView.builder(
        controller: scrollController,
        padding: EdgeInsets.only(),
        itemCount: 40,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.only(left: 20, top: 20),
            child: Text('$index', style: TextStyle(fontSize: 25)),
          );
        },
      ),
    );
  }
}

Because the appBar's opacity is often linked with scroll widgets to do some UI effects, so I make widget directly for you to use conveniently. #

  • LinkedOpacityNavigationBar (iOS style)
  • LinkedOpacityAppBar (material style)

parameter guide: #

  • toggleOffsetY First,the widgets in this lib have this parameter,so you may think that what is toggleOffsetY? Let me take an example using the example page call LinkedOpacityPage (just above ,the first GIF) When the offsetY of your listView is 0(initialOffset) you can't see the title text on top navigationBar and, when the offsetY = toggleOffset Y ,the title text is visible completely,it a linear change. In other words,when offsetY = 0 ,the opacity = 0,and when offset = toggleOffset,the opacity = 1.0; All in all,the faster you want to change your UI effect,the smaller toggleOffsetY you should set;

FAQ #

  • When I push a page ,which has a LinkedOffsetWidget or LinkedOpacityWidget in the CupertinoNavigationBar,the effect is strange

Solution:Set parameter "transitionBetweenRoute" to false.

My other packages: #

jr_extension

[0.1.0] - 2020.3.3 #

[0.0.1] - 2020.3.2 #

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'pages/linked_offset_page.dart';
import 'pages/linked_opacity_app_bar_page.dart';
import 'pages/linked_opacity_navigation_bar_page.dart';
import 'pages/linked_opacity_page.dart';
import 'pages/linked_size_page.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: Page(),
    );
  }
}

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text("Example"),
      ),
      body: ListView(
        children: <Widget>[
          _buildWidget("LinkedSizeWidget", () {
            Navigator.push(context,
                CupertinoPageRoute(builder: (context) => LinkedSizePage()));
          }),
          _buildWidget("LinkedOffsetWidget", () {
            Navigator.push(context,
                CupertinoPageRoute(builder: (context) => LinkedOffsetPage()));
          }),
          _buildWidget("LinkedOpacityWidget", () {
            Navigator.push(context,
                CupertinoPageRoute(builder: (context) => LinkedOpacityPage()));
          }),
          _buildWidget("LinkedOpacityAppBarPage", () {
            Navigator.push(
                context,
                CupertinoPageRoute(
                    builder: (context) => LinkedOpacityAppBarPage()));
          }),
          _buildWidget("LinkedOpacityNavigationBar", () {
            Navigator.push(
                context,
                CupertinoPageRoute(
                    builder: (context) => LinkedOpacityNavigationBarPage()));
          }),
        ],
      ),
    );
  }

  Widget _buildWidget(String text, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(20, 10, 0, 10),
        child: Text(text, style: TextStyle(fontSize: 30)),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  linked_scroll_widgets: ^0.1.0

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:linked_scroll_widgets/linked_scroll_widgets.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
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]
66
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 [linked_scroll_widgets] 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