flutter_sticky_headers icon indicating copy to clipboard operation
flutter_sticky_headers copied to clipboard

EXAMPLE: how to do nesting with this plugin

Open b-cancel opened this issue 6 years ago • 0 comments

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers/widget.dart';

//-----Start App
void main() => runApp(MyApp());

//-----Entry Point
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StatelessLink();
  }
}

//-----Statless Link Required Between Entry Point And App
class StatelessLink extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nested Picker Link',
      home: Test(),
    );
  }
}

//-----Test Widget
class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    double toolBarSize = 50;
    double sectionSize = 45;

    Widget toolBar = Container(
      width: MediaQuery.of(context).size.width,
      height: toolBarSize,
      color: Colors.red.withOpacity(1),
      child: Text("tool bar"),
    );

    Widget banner = Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      color: Colors.white,
      child: Text("banner"),
    );

    Widget subSection = StickyHeaderBuilder(
      builder: (context, stuckAmount) {
        stuckAmount = stuckAmount.clamp(0.0, 1.0);
        return Padding(
          padding: EdgeInsets.only(top: (toolBarSize + sectionSize) * (1.0 - stuckAmount)),
          child: Container(
            color: Colors.teal,
            width: MediaQuery.of(context).size.width,
            height: 26,
            child: Text("subsection"),
          ),
        );
      },
      content: Container(
        color: Colors.grey,
        width: MediaQuery.of(context).size.width,
        height: 38,
        child: Text("section body"),
      ),
    );

    Widget aSection = StickyHeaderBuilder(
      builder: (context, stuckAmount) {
        stuckAmount = stuckAmount.clamp(0.0, 1.0);
        return Padding(
          padding: EdgeInsets.only(top: toolBarSize * (1.0 - stuckAmount)),
          child: Container(
            color: Colors.pink,
            width: MediaQuery.of(context).size.width,
            height: sectionSize,
            child: Text("section"),
          ),
        );
      },
      content: Container(
        color: Colors.yellow,
        width: MediaQuery.of(context).size.width,
        height: 500,
        child: Container(
          padding: EdgeInsets.all(32),
          child: Column(
            children: [
              subSection,
              subSection,
              subSection,
            ]
          ),
        ),
      ),
    );

    return Scaffold(
      backgroundColor: Theme.of(context).primaryColorDark,
      body: SafeArea(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildListDelegate([
                banner,
                StickyHeaderBuilder(
                  builder: (context, stuckAmount) {
                    return toolBar;
                  },
                  content: Container(
                    padding: EdgeInsets.all(32),
                    child: Column(
                      children: [
                        aSection,
                        aSection,
                        aSection,
                      ]
                    ),
                  ),
                ),
              ]),
            ),
          ]
        ),
      ),
    );
  }
}

b-cancel avatar Aug 07 '19 05:08 b-cancel