yflutter_widgets 0.2.9 copy "yflutter_widgets: ^0.2.9" to clipboard
yflutter_widgets: ^0.2.9 copied to clipboard

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

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

1
likes
30
pub points
0%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

License

BSD-3-Clause (LICENSE)

Dependencies

extended_nested_scroll_view, fluro, flutter, flutter_easyrefresh, provider

More

Packages that depend on yflutter_widgets