A Flutter sticky headers & index ListView. Based on scrollable_positioned_list.

Overview

Language: English | 中文简体

azlistview

A Flutter sticky headers & index ListView. Based on scrollable_positioned_list.
AzListView, SuspensionView, IndexBar.

Features

  • Easy creation of city list or contact list interfaces.
  • List items can be grouped A-Z.
  • Sticky headers with floating option.
  • Support custom header.
  • Support index linkage.
  • IndexBar supports custom styles.
  • IndexBar supports local images.
  • Allows scrolling to a specific item in the list.

Pub

dependencies:
  azlistview: ^2.0.0

Screenshots

Changelog

Please see the Changelog page to know what's recently changed.
v1.1.0
itemBuilder do not include the header, because it is automatically merged internally. fix #38.

App

Moss.
A GitHub client app developed with Flutter, which supports Android iOS Web.
Web :Flutter Web.

Comments
  • IndexBar在Andrid横屏时越界

    IndexBar在Andrid横屏时越界

    ════════ Exception caught by rendering library ═════════════════════════════════════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 25 pixels on the bottom.

    The relevant error-causing widget was: Column file:///Users/zhaoxm/workspace/flutter/azlistview/lib/src/index_bar.dart:244:18 The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

    Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

    The specific RenderFlex in question is: RenderFlex#4ae29 relayoutBoundary=up9 OVERFLOWING ... parentData: (can use size) ... constraints: BoxConstraints(0.0<=w<=36.0, 0.0<=h<=342.7) ... size: Size(36.0, 342.7) ... direction: vertical ... mainAxisAlignment: start ... mainAxisSize: min ... crossAxisAlignment: center ... verticalDirection: down ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ════════════════════════════════════════════════════════════════════════════════════════════════════

    opened by zhaoxinming 9
  • A RenderFlex overflowed on the bottom.

    A RenderFlex overflowed on the bottom.

      List<Widget> pages = [
        Body(),
        GitHubLanguagePage(),
      ];
    
      int currentIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          resizeToAvoidBottomInset: false,
          body: pages[currentIndex],
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              print("add press ");
            },
            child: Icon(Icons.add),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  icon: Icon(Icons.view_module),
                  onPressed: () {
                    setState(() {
                      currentIndex = 0;
                    });
                    print("全部:$currentIndex");
                  },
                ),
                IconButton(
                  icon: Icon(Icons.favorite),
                  onPressed: () {
                    setState(() {
                      currentIndex = 1;
                    });
                    print("收藏:$currentIndex");
                  },
                ),
              ],
            ),
          ),
        );
      }
    

    Body Widget code:

      @override
      Widget build(BuildContext context) {
        _search('');
        print('build ...');
    
        return Scaffold(
          resizeToAvoidBottomInset: false,
          body: SafeArea(
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.all(12),
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: Color.fromARGB(255, 225, 226, 230), width: 0.33),
                      color: Color.fromARGB(255, 239, 240, 244),
                      borderRadius: BorderRadius.circular(12)),
                  child: TextField(
                    autofocus: false,
                    onChanged: (value) {
                      _search(value);
                    },
                    controller: textEditingController,
                    decoration: InputDecoration(
                        prefixIcon: Icon(
                          Icons.search,
                          color: Colors.grey,
                        ),
                        suffixIcon: Offstage(
                          offstage: textEditingController.text.isEmpty,
                          child: InkWell(
                            onTap: () {
                              textEditingController.clear();
                              _search('');
                            },
                            child: Icon(
                              Icons.cancel,
                              color: Colors.grey,
                            ),
                          ),
                        ),
                        border: InputBorder.none,
                        hintText: 'Search',
                        hintStyle: TextStyle(color: Colors.grey)),
                  ),
                ),
                Expanded(
                  child: AzListView(
                    data: controller.dataList(),
                    physics: AlwaysScrollableScrollPhysics(),
                    itemCount: controller.dataList().length,
                    itemBuilder: (BuildContext context, int index) {
                      PinYin model = controller.dataList()[index];
                      return getListItem(context, model);
                    },
                    itemScrollController: itemScrollController,
                    susItemBuilder: (BuildContext context, int index) {
                      PinYin model = controller.dataList()[index];
                      return getSusItem(context, model.getSuspensionTag());
                    },
                    indexBarOptions: IndexBarOptions(
                      needRebuild: true,
                      selectTextStyle: TextStyle(
                          fontSize: 12,
                          color: Colors.white,
                          fontWeight: FontWeight.w500),
                      selectItemDecoration: BoxDecoration(
                          shape: BoxShape.circle, color: Color(0xFF333333)),
                      indexHintWidth: 96,
                      indexHintHeight: 97,
                      // indexHintDecoration: BoxDecoration(
                      //   image: DecorationImage(
                      //     image: AssetImage(
                      //         Utils.getImgPath('ic_index_bar_bubble_white')),
                      //     fit: BoxFit.contain,
                      //   ),
                      // ),
                      indexHintAlignment: Alignment.centerRight,
                      indexHintTextStyle:
                          TextStyle(fontSize: 24.0, color: Colors.black87),
                      indexHintOffset: Offset(-30, 0),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    

    设置了 resizeToAvoidBottomInset: false

    当点击搜索的时候键盘弹出就报底部溢出

    opened by MoraxCloud 6
  • Issue when Phone rotate

    Issue when Phone rotate

    Issue with the Alphabets when phone rotate on the small side...I get A RenderFlex overflowed by 200 pixels on the bottom.

    Is there a way to hide alphabets or reduce the number of letters like on android phones?

    Is there documentation on this?

    opened by buzzicards 4
  • 发现有个bug

    发现有个bug

    Scaffold( appBar: new AppBar( title: new Text(widget.title), centerTitle: true, ), body: new Column( children: [ Container( alignment: Alignment.centerLeft, padding: const EdgeInsets.only(left: 15.0), height: 50.0, child: Text("当前城市: 成都市"), ), Expanded( flex: 1, child: new AzListView( data: _cityList, topData: _hotCityList, itemBuilder: (context, model) => _buildListItem(model), suspensionWidget: _buildSusWidget(_suspensionTag), isUseRealIndex: true, itemHeight: _itemHeight, suspensionHeight: _suspensionHeight, onSusTagChanged: _onSusTagChanged, )) ], ));我发现这个必须要放在Scaffold里面并且要有appbar,不然点击侧边索引后对应的索引标题会有部分重复啊,不知道是我写错了还是有问题,麻烦作者确认一下

    opened by summerNa 4
  • 作者你好,我有个小问题想咨询一下,不知道这个问题算不算bug

    作者你好,我有个小问题想咨询一下,不知道这个问题算不算bug

    首先感谢你提供的组件,我在使用组件时发现了一个小问题,我不知道是不是该定义为bug。 当我把模拟数据加载完 通过右侧的字母列表 滑动选中对应的区域 屏幕中间会显示当前停留的字母区域的 灰色的字母,这个滑动的时候 都是ok的,但是发现如果用手直接点对应的字母后 该字母不会消失,点击屏幕周边 也不会消失,如果重新用手在字母列表上滑动一下 则能消失。 不知是否是bug 还是我缺少了什么设置。希望能得到你的帮助

    opened by lanjiachuan 4
  • Package Performance Hit

    Package Performance Hit

    Before I ask my question... the explanation of what I'm trying to achieve...

    • IM BUILDING a custom contact picker

    I have headers for each section A, B, etc...

    I have the ability to scroll to a particular section because I know the height of . the headers . and how many items are in each section (all the contacts are of the same size)

    At the moment I am using a CustomScrollView with a SliverFixedExtentList with a SliverChildBuilderDelegate

    • THE QUESTION Will using this plugin to make my headers sticky affect performance by essentially shrinking wrapping each of my SliverFixedExtentList? will performance be affected any other way? If so, by how much?
    opened by b-cancel 0
  • Adding index builder

    Adding index builder

    Description

    This PR has created to add new parameter to AzListView called indexBuilder.

    The AzListView.indexBuilder is as simple builder, used to customize the index itens in indexBar. This paramenter is optional.

    Motivation

    The AzListView contains the indexBarData can be used to change the index list, but cannot change the render of index elements. Now you can create the custom render for you indexBarData.

    opened by GustC 0
  • Upgrade flutter, library versions, and include `minCacheExtent` property

    Upgrade flutter, library versions, and include `minCacheExtent` property

    In this pull request:

    • Upgraded flutter version so 3.1.0 can be supported
    • Upgraded the version for scrollable_positioned_list
    • Upgraded the packages inside examples
    • Added the minCacheExtent property as sometime it require to pass
    opened by muhammadmateen027 0
  • Azlistview Scroll issue adding the shrinkwrap

    Azlistview Scroll issue adding the shrinkwrap

    Currently working on the Page where there are some items on the top in the Singlechildscrollview inside the column and then there is azlistview which i am using with shrinkwrap to true. But there is some scroll issue when i add the shrinkwrap to true. Below is the sample code : https://github.com/sagaracharya24/AZScrollList.git Adding the Gif for the behaviour.

    opened by Sagarz2422 0
  • flutter 3.0 warning

    flutter 3.0 warning

    ../.pub-cache/hosted/pub.flutter-io.cn/scrollable_positioned_list-0.2.3/lib/src/scrollable_positioned_list.dart:439:24: Warning: Operand of null-aware operation '!' has type 'SchedulerBinding' which excludes null.

    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../Downloads/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance!.addPostFrameCallback((_) {
    opened by jiushicheng123 4
Owner
Flutter中国开源项目
Flutter中文开发者社区开源项目。旨在开发一系列Flutter SDK之外常用(实用)的Package、插件,丰富Flutter第三方库,为Flutter生态贡献来自中国开发者的力量,欢迎所有志同道合的同学一起加入。
Flutter中国开源项目
Build a grouped list, which support expand/collapse section and sticky headers, support use it with sliver widget.

sticky_and_expandable_list Flutter implementation of sticky headers and expandable list.Support use it in a CustomScrollView. README i18n:中文说明 Feature

tp7309 114 Nov 16, 2022
Flutter package: Similar to a ListView, but lets you programmatically jump to any item, by index.

indexed_list_view Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you

Marcelo Glasberg 244 Dec 27, 2022
A flutter demo app to practice List.generate with ListView.builder

ListView 3 A flutter demo app to practice List.generate with ListView.builder Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asi

Alexander Sosa 0 Jan 3, 2022
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

Liew Jun Tung 81 Sep 21, 2022
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character.

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character. Quick scroll through list via dragging through alphabets.

Hussain Al Lawati 1 Apr 3, 2022
Listview builder with image and text

listview_builder_with_image_and_text A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resource

null 0 May 4, 2022
Code generation for Flutter Padding widgets based on your constants

Code generation for Flutter Padding widgets based on your constants

Emanuele 14 Oct 20, 2022
⌚️ A general flutter timeline widget based on real-world application references

framework platform tags title flutter Android, iOS, Web, macOS, Linux, Windows flutter, timeline, flutter timeline, timeline tile flutter timeline flu

Universe 285 Dec 21, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
A flutter package to control rebuilds of a widget based on updates of a Listenable

A flutter package to control rebuilds of a widget based on updates of a Listenable. What is Grab? Grab is similar to ValueListenablebuiler or Animated

Kabo 5 Dec 3, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022
Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Kim Seung Hwan 7 Dec 7, 2022
Various Flutter widgets that are developed by Google but not by the core Flutter team

Flutter widgets This repository contains the source code for various Flutter widgets that are developed by Google but not by the core Flutter team. Is

Google 1.1k Jan 7, 2023
🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
Flutter Application to test basic flutter understanding

Flutter Application to test basic flutter understanding Getting Started Before you start with the application have a look at what

null 0 Apr 16, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022