YFlutterWidgets
A Flutter Widget Lib, including ListView, Divider, Tags Grid and son.
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;
}