example setup

example/lib/main.dart

@@ -1,5 +1,12 @@
+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 {
@@ -8,103 +15,63 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see the
-        // application has a blue toolbar. Then, without quitting the app, try
-        // changing the primarySwatch below to Colors.green and then invoke
-        // "hot reload" (press "r" in the console where you ran "flutter run",
-        // or simply save your changes to "hot reload" in a Flutter IDE).
-        // Notice that the counter didn't reset back to zero; the application
-        // is not restarted.
         primarySwatch: Colors.blue,
       ),
-      home: MyHomePage(title: 'Flutter Demo Home Page'),
+      home: Page(),
     );
   }
 }
 
-class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
-
-  // This widget is the home page of your application. It is stateful, meaning
-  // that it has a State object (defined below) that contains fields that affect
-  // how it looks.
-
-  // This class is the configuration for the state. It holds the values (in this
-  // case the title) provided by the parent (in this case the App widget) and
-  // used by the build method of the State. Fields in a Widget subclass are
-  // always marked "final".
-
-  final String title;
-
+class Page extends StatefulWidget {
   @override
-  _MyHomePageState createState() => _MyHomePageState();
+  _PageState createState() => _PageState();
 }
 
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that something has
-      // changed in this State, which causes it to rerun the build method below
-      // so that the display can reflect the updated values. If we changed
-      // _counter without calling setState(), then the build method would not be
-      // called again, and so nothing would appear to happen.
-      _counter++;
-    });
-  }
-
+class _PageState extends State<Page> {
   @override
   Widget build(BuildContext context) {
-    // This method is rerun every time setState is called, for instance as done
-    // by the _incrementCounter method above.
-    //
-    // The Flutter framework has been optimized to make rerunning build methods
-    // fast, so that you can just rebuild anything that needs updating rather
-    // than having to individually change instances of widgets.
     return Scaffold(
-      appBar: AppBar(
-        // Here we take the value from the MyHomePage object that was created by
-        // the App.build method, and use it to set our appbar title.
-        title: Text(widget.title),
+      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()));
+          }),
+        ],
       ),
-      body: Center(
-        // Center is a layout widget. It takes a single child and positions it
-        // in the middle of the parent.
-        child: Column(
-          // Column is also a layout widget. It takes a list of children and
-          // arranges them vertically. By default, it sizes itself to fit its
-          // children horizontally, and tries to be as tall as its parent.
-          //
-          // Invoke "debug painting" (press "p" in the console, choose the
-          // "Toggle Debug Paint" action from the Flutter Inspector in Android
-          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
-          // to see the wireframe for each widget.
-          //
-          // Column has various properties to control how it sizes itself and
-          // how it positions its children. Here we use mainAxisAlignment to
-          // center the children vertically; the main axis here is the vertical
-          // axis because Columns are vertical (the cross axis would be
-          // horizontal).
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.display1,
-            ),
-          ],
-        ),
+    );
+  }
+
+  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)),
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: Icon(Icons.add),
-      ), // This trailing comma makes auto-formatting nicer for build methods.
     );
   }
 }

example/lib/pages/linked_offset_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:linked_scroll_widgets/linked_scroll_widgets.dart';
+
+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(
+        transitionBetweenRoutes: false,
+        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)),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/pages/linked_opacity_app_bar_page.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:linked_scroll_widgets/linked_scroll_widgets.dart';
+
+class LinkedOpacityAppBarPage extends StatefulWidget {
+  @override
+  _LinkedOpacityAppBarPageState createState() =>
+      _LinkedOpacityAppBarPageState();
+}
+
+class _LinkedOpacityAppBarPageState extends State<LinkedOpacityAppBarPage> {
+  ScrollController scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    scrollController = ScrollController();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      extendBodyBehindAppBar: true,
+      appBar: LinkedOpacityAppBar(
+        backgroundColor: Colors.deepOrange,
+        scrollController: scrollController,
+        toggleOffsetY: 200,
+        title:
+            Text("haha", style: TextStyle(fontSize: 20, color: Colors.black)),
+      ),
+      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)),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/pages/linked_opacity_navigation_bar_page.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:linked_scroll_widgets/linked_scroll_widgets.dart';
+
+class LinkedOpacityNavigationBarPage extends StatefulWidget {
+  @override
+  _LinkedOpacityNavigationBarPageState createState() =>
+      _LinkedOpacityNavigationBarPageState();
+}
+
+class _LinkedOpacityNavigationBarPageState
+    extends State<LinkedOpacityNavigationBarPage> {
+  ScrollController scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    scrollController = ScrollController();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      extendBodyBehindAppBar: true,
+      appBar: LinkedOpacityNavigationBar(
+        transitionBetweenRoutes: false,
+        scrollController: scrollController,
+        backgroundColor: Colors.blueAccent,
+        middle: Text("这个导航栏透明度会变哦"),
+      ),
+      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)),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/pages/linked_opacity_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:linked_scroll_widgets/linked_scroll_widgets.dart';
+
+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)),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/pages/linked_size_page.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:linked_scroll_widgets/linked_scroll_widgets.dart';
+
+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)),
+          );
+        },
+      ),
+    );
+  }
+}

example/pubspec.lock

@@ -81,6 +81,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.4"
+  linked_scroll_widgets:
+    dependency: "direct main"
+    description:
+      name: linked_scroll_widgets
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.1"
   matcher:
     dependency: transitive
     description: