Description:

yflutter widgets

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,
),
),
copied to clipboard
Tags_Grid_View: #
Setup Tags List, and selected index if selectable.
YTagsGridView(
tagList: ["1", "2", "3", "4", "5"],
selectedIndex: 0,
selectable: true,
),
copied to clipboard
Use selectCallback to get click callback.
selectCallback(index){
print("$index button clicked");
}
copied to clipboard
Divider: #
Divide(type: DivideType.iOSTableDefault),
copied to clipboard
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),),
copied to clipboard
ListView: #
Body:
YListView(
type: HeaderType.Normal,
borderType: BorderTypeBorderType.ListWhole,
headerHeight: 150,
numOfSection: _sectionCount,
numberOfRowsInSection: _numberOfRowsInSection,
sectionHeight: _sectionHeight,
cellHeight: _cellHeight,
sectionHeader: _headerOfSectionAtIndex,
cell: _cellOfRowAtIndex,
),
copied to clipboard
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;
}
copied to clipboard
THANKS #
Many thanks for:
fluro
provider
flutter_easyrefresh
extended_nested_scroll_view
ScreenUtil

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter