Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luckysmg/linked_scroll_widgets
A widget lib that the widget in this lib can react to flutter ScrollController's offset
https://github.com/luckysmg/linked_scroll_widgets
Last synced: 2 months ago
JSON representation
A widget lib that the widget in this lib can react to flutter ScrollController's offset
- Host: GitHub
- URL: https://github.com/luckysmg/linked_scroll_widgets
- Owner: luckysmg
- License: apache-2.0
- Created: 2020-03-02T10:59:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T11:47:30.000Z (over 4 years ago)
- Last Synced: 2024-10-03T05:21:18.153Z (3 months ago)
- Language: Dart
- Size: 1.69 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Language: [English](https://github.com/luckysmg/linked_scroll_widgets/blob/master/README.md) | [中文简体](https://github.com/luckysmg/linked_scroll_widgets/blob/master/README-CN.md)
# linked_scroll_widgets
一个可以和滚动组件交互的一个widget库
## 别的不说，直接上例子
- LinkedOpacityWidget:
```dart
class LinkedOpacityPage extends StatefulWidget {
@override
_LinkedOpacityPageState createState() => _LinkedOpacityPageState();
}
class _LinkedOpacityPageState extends State {
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：
```dart
class LinkedSizePage extends StatefulWidget {
@override
_LinkedSizePageState createState() => _LinkedSizePageState();
}
class _LinkedSizePageState extends State {
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:
```dart
class LinkedOffsetPage extends StatefulWidget {
@override
_LinkedOffsetPageState createState() => _LinkedOffsetPageState();
}
class _LinkedOffsetPageState extends State {
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)),
);
},
),
);
}
}
```
## 由于透明度变换常常和AppBar关联，除了上述三个组件，索性还封装了两个组件，开箱即用
- LinkedOpacityNavigationBar （iOS风格）
- LinkedOpacityAppBar （material风格）
## 参数说明：
- toggleOffsetY
首先此包中的组件都包含这个属性，那什么是toggleOffsetY？
这个是一个滚动的临界值，当你的滚动明组件（如listView）的滚动offset达到了这个值，你的相关联的UI效果也会达到边界值
这里以上面 LinkedOpacityPage 中的例子为例，
具体情况如下：当你listView处于初始位置（offsetY = 0)时，你是完全看不见导航栏上的字的，当滚动到临界值，也就是
offsetY = toggleOffsetY 时，你导航栏上的字才能完全显示出来，也就是说这个一个对应的线性变化。
也就是说，当你滚动的offsetY = 0和 offsetY = toggleOffsetY时,分别达到两端的临界值.
一句话来说，如果你想要你的UI效果变化的快，就把 toggleOffsetY设定得越小即可(toggleOffsetY > 0).
## FAQ
- 当我push一个新页面，这个页面的导航栏是用CupertinoNavigationBar制作的，里面可能包含LinkedOffsetWidget或者LinkedOpacityWidget,在页面动画过程中效果很奇怪怎么办：
解决方法：将CupertinoNavigationBar中的"transitionBetweenRoute" 参数设置为false即可
# 我的其他作品：
[jr_extension](https://pub.dev/packages/jr_extension)
[flutter_swipe_action_cell](https://pub.dev/packages/flutter_swipe_action_cell)