YFlutterWidgets

Pub

A Flutter Widget Lib, including ListView, Divider, Tags Grid and so on.

Note:

  • This plugin is still under development,
  • Feel free to create a pull request,
  • and contact me anytime if you have questions.

TOC

Custom_Card:

A custom card view.

  • Based on Container().
  • Could customized color: Background and Shadow,
  • Margins: LTFB,
  • @required: Inside View(Widget).

Tags_Grid_View:

A tags grid view, including tag item.

  • The tag can be selected(single),
  • Could customized color: selected and unselected color,
  • 3 Items in each row.

Divider:

A horizontal divider.

  • Provide 3 styles and can be customized with color and edgeInsets,
  • Will support vertical soon.

DashLine:

A customized Dash line separator.

ListView:

A ListView with native features:

  • Provide 3 types of List Header:
    • AppBar level header,
    • Zoom/Pin header,
    • Normal Scroll Header;
  • Section feature for ListView,
  • List / Section border with Style of SYCustomCard.

How to USE:

Custom_Card

  • insideWidget: Put the inside display widgets here,
  • sEdgeInsets: Add the LTRB margin of the card,
  • backgroundColor: Default White,
  • shadowColor: Default 0x14000000
YCustomCard(
  sEdgeInsets: EdgeInsets.only(left: 16, top: 20, right: 16),
    insideWidget: YTagsGridView(
    tagList: ["1", "2", "3", "4", "5"],
    selectedIndex: 0,
    selectable: true,
  ),
),

Tags_Grid_View:

Setup Tags List, and selected index if selectable.

YTagsGridView(
  tagList: ["1", "2", "3", "4", "5"],
  selectedIndex: 0,
  selectable: true,
),

Use selectCallback to get click callback.

selectCallback(index){
  print("$index button clicked");
}

Divider:

Divide(type: DivideType.iOSTableDefault),

Dash_Line:

  • axis: Direction of the line, Default Horizontal,
  • dotSize: The width and height of each dot, Default is 3 by 3, round,
  • count: The count of dots in the line.
  • color: The color of dots, Default 0xff2c2c2c.
YDashedLine(count: 20, dotSize: Size(8,8),),

ListView:

Body:

YListView(
  type: HeaderType.Normal,
  borderType: BorderTypeBorderType.ListWhole,
  headerHeight: 150,
  numOfSection: _sectionCount,
  numberOfRowsInSection: _numberOfRowsInSection,
  sectionHeight: _sectionHeight,
  cellHeight: _cellHeight,
  sectionHeader: _headerOfSectionAtIndex,
  cell: _cellOfRowAtIndex,
),

Configure and Setup:

int _sectionCount = 3;

// Get row count.
int _numberOfRowsInSection(int sectionIndex) {
  if (sectionIndex == 0) {
    return 5;
  } else if (sectionIndex == 1) {
    return 10;
  } else {
    return 20;
  }
}

// Section header widget builder.
Widget _headerOfSectionAtIndex(BuildContext context, int sectionIndex) {
  return InkWell(
    onTap: () {
      print('click section header. -> section:$sectionIndex');
    },
    child: Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: 16.0),
      height: 100,
      child: Text('I am section header -> section:$sectionIndex'),
    ),
  );
}

// cell item widget builder.
Widget _cellOfRowAtIndex(BuildContext context, int sectionIndex, int rowIndex) {
  return InkWell(
    onTap: () {
      print('click cell item. -> section:$sectionIndex row:$rowIndex');
    },
    child: Container(
      padding: EdgeInsets.only(left: 16.0),
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Color.fromRGBO(240, 240, 240, 1),
        ))),
      height: 50.0,
      child: Text('I am cell -> section:$sectionIndex  row$rowIndex'),
    ),
  );
}

// Each section header height;
double _sectionHeight(BuildContext context, int sectionIndex) {
  return 50.0;
}

// Each cell item widget height.
double _cellHeight(BuildContext context, int section, int rowIndex) {
  return 50.0;
}

THANKS

Many thanks for: fluro provider flutter_easyrefresh extended_nested_scroll_view ScreenUtil

Libraries

application
colors_config
contractedbarprovider
custom_refresh_header
screenutil_creator
tabbar_item
ycustom_card
ydashed_line
ydivide
ylistview
ylistviewbody
ylvappbarheader
ylvconfigs
ylvsectionmodel
ylvzoomheader
ylvzoomheaderdelegate
ytabbar
ytag_item
ytags_grid_view