YFlutterWidgets

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:
• Tags_Grid_View:
• Divider:
• DashLine:
• ListView:
• How to USE:
  • Custom_Card
  • Tags_Grid_View:
  • Divider:
  • Dash_Line:
  • ListView:

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