Qries

Subscribe Us

Advertisement

ListTopBottom

 Flutter ListTopBottom:


Video:


Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  final initList = List<String>.generate(100, (i) => "Item $i");
  ScrollController scrollController;
  bool showFAB = false;
  @override  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(onScroll);
  }

  onScroll() {
    if (scrollController.offset < 500 && showFAB) {
      setState(() => showFAB = false);
    } else if (scrollController.offset >= 500 && showFAB == false) {
      setState(() => showFAB = true);
    }
  }

  @override  void dispose() {
    scrollController.removeListener(onScroll);
    scrollController.dispose();
    super.dispose();
  }

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListTopBottom"),
        backgroundColor: Colors.blueGrey,
      ),
      backgroundColor: Colors.yellow,
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Expanded(
                child: ListView.builder(
                  controller: scrollController,
                  shrinkWrap: true,
                  itemCount: initList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(
                        '${initList[index]}',
                        style: TextStyle(
                          fontSize: 25.0,
                        ),
                      ),
                    );
                  },
                ),
              ),
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    onPressed: () => scrollToTop(),
                    color: Colors.teal,
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.keyboard_arrow_up),
                        Text(
                          "Top",
                          style: TextStyle(
                            fontSize: 23.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                  RaisedButton(
                    onPressed: () => scrollToBottom(),
                    color: Colors.teal,
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.keyboard_arrow_down),
                        Text(
                          "Bottom",
                          style: TextStyle(
                            fontSize: 23.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
          Positioned(
            right: 20,
            bottom: 100,
            child: showFAB                ? FloatingActionButton(
              onPressed: () {},
              child: Text('F'),
            )
                : Container(),
          ),
        ],
      ),
    );
  }

  scrollToTop() {
    scrollController.animateTo(
      scrollController.position.minScrollExtent,
      duration: Duration(milliseconds: 1000),
      curve: Curves.easeIn,
    );
    setState(() {});
  }

  scrollToBottom() {
    scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: Duration(milliseconds: 1000),
      curve: Curves.easeOut,
    );
    setState(() {});
  }
}

Post a Comment

0 Comments