کامپوننت های فلاتراپ
در جزییات کامپوننت های فلاتراپ جستجو کنید
FxImageCrop(
imagePath: "packages/fx_flutterap_components/assets/images/img3.jpg",
aspectRatio: 16 / 9,
)
CarouselSlider(
carouselController: _carouselController1,
items: widgetList,
options: CarouselOptions(
viewportFraction: 0.8,
// height: 270,
initialPage: 2,
disableCenter: true,
// aspectRatio: 0.1,
enlargeCenterPage: true),
),
where
final CarouselController _carouselController1 = CarouselController();
L Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
CarouselSlider(
carouselController: _carouselController2,
items: widgetList,
options: CarouselOptions(
viewportFraction: 0.8,
// height: 270,
initialPage: 2,
disableCenter: true,
autoPlay: true,
autoPlayAnimationDuration:
const Duration(milliseconds: 100),
// aspectRatio: 0.1,
enlargeCenterPage: true),
),
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController2 = CarouselController();
FxSliderWithIconIndicator(
controller: _carouselController5,
items: widgetList,
)
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController5 = CarouselController();
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(
context,
AppLocalizations.of(context)!.message,
hasClose: true,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
);
},
),
FxSliderWithIndicator(
controller: _carouselController1,
items: widgetList,
)
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController1 = CarouselController();
FxSliderWithIcon(
controller: _carouselController,
items: widgetList,
),
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController = CarouselController();
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(
context,
AppLocalizations.of(context)!.message,
);
},
),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(context, AppLocalizations.of(context)!.message,
textColor: InitialStyle.successColorDark,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(InitialDims.border2)),
border: Border.all(
color: InitialStyle.successColorDark, width: 2)));
},
),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(context, AppLocalizations.of(context)!.message, hasClose: true);
},
),
FxBarChartSample4()
FxLinearChart()
FxCircularChart()
FxBarChartSample1()
FxBarChartSample2()
FxBarChartSample3()
FxScatterChartSample()
FxRadarChartSample1()
FxAccordion(
items: items,
),
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxAccordion(
items: items,
isRemovable: true,
),
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxAccordion(
items: items,
isRemovable: true,
),
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxAccordion(
items: items,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxAccordion(
items: items,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
openIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/menu.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
closeIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/menu.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
),
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxAccordion(
backGroundImagePath: "packages/fx_flutterap_components/assets/images/img3.jpg",
contentColor: InitialStyle.primaryLightColor,
titleTextStyle: TextStyle(
color: InitialStyle.primaryDarkColor,
),
childrenTextStyle: TextStyle(
color: InitialStyle.primaryDarkColor,
),
items: items,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(InitialDims.space2))),
)
where
final List<Map<String, dynamic>> items = List.generate(
3,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxScrollableaccordion(items: itemsScroll,)
where
final List<Map<String, dynamic>> itemsScroll = List.generate(
10,
(index) => {
"id": index,
"title": "Item 0",
"content": AppLocalizations.of(context)!.lorem,
});
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(
context,
AppLocalizations.of(context)!.message,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
);
},
),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(context, AppLocalizations.of(context)!.message,
textColor: InitialStyle.successColorDark,
hasClose: true,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/danger.svg",
size: InitialDims.icon5,
color:
InitialStyle.successColorDark,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(
InitialDims.border2)),
border: Border.all(
color: InitialStyle.successColorDark??SuccessColor.successColorDark,
width: 2),
));
},
),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
FxAlerts.success(
context,
AppLocalizations.of(context)!.message,
myContent: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/img2.jpg",
borderRadius: InitialDims.space5,
),
const FxVSpacer(
big: true,
factor: 3,
),
FxText(
AppLocalizations.of(context)!.lorem,
color: InitialStyle.successColorDark,
align: TextAlign.start,
)
],
),
);
},
),
FxText(
"h1 : "+AppLocalizations.of(context)!.sampleText,
tag:Tag.h1,),
Column(
children: [
FxDottedText(
AppLocalizations.of(context)!.sampleText,
),
const FxVSpacer(
big: true,
),
FxDottedText(
AppLocalizations.of(context)!.sampleText,
),
const FxVSpacer(
big: true,
),
FxDottedText(
AppLocalizations.of(context)!.sampleText,
),
const FxVSpacer(
big: true,
),
FxDottedText(
AppLocalizations.of(context)!.sampleText,
),
],
),
FxText(
"h3 : Wishing is the reason for talent:)",
tag: Tag.h3,
color: InitialStyle.dangerColorRegular,
),
FxText.selectable(
"h3 : Wishing is the reason for talent:)",
tag: Tag.h3,
),
FxText(
"h1 : Wishing is the reason for talent:)",
tag: Tag.h1
backgroundColor: InitialStyle.warningColorLight,
),),
and
FxText(
"h1 : Wishing is the reason for talent:)",
tag: Tag.h1,
decoration: TextDecoration.lineThrough,
),
FxText(
"highTitleFontSize : Wishing is the reason for talent:)",
size: InitialDims.highTitleFontSize,
),
and
FxText(
"highTitleFontSize : Wishing is the reason for talent:)",
size: InitialDims.highTitleFontSize,
isBold: true,
),
FxButton(),
FxButton(
text: AppLocalizations.of(context)!.primary,
fillColor: Colors.transparent,
borderColor: InitialStyle.buttonColor,
textColor: InitialStyle.primaryDarkColor,
),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
),
FxButton(
text: AppLocalizations.of(context)!.success,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
textColor: InitialStyle.successColorDark,
),
FxButton(
text: AppLocalizations.of(context)!.information,
disable: true,
fillColor: InitialStyle.disableColorRegular),
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/InstagramLogo.svg",
size: InitialDims.icon5,
color: InitialStyle.socialNetworkColorInstagram,
),
fillColor: InitialStyle.primaryLightColor,
borderColor: InitialStyle.socialNetworkColorInstagram,
),
FxButton(
text: AppLocalizations.of(context)!.information,
borderRadiusSize: InitialDims.fullBorder,
fillColor: InitialStyle.disableColorRegular),
FxButton(
text: AppLocalizations.of(context)!.information,
size: InitialDims.space5,),
FxBlockButton(
text: AppLocalizations.of(context)!.blocbutton,
),
FxGroupButton(
widgetList: widgetList1,
// onPressedList[]: ,
initialSelectedindex: 0,
),
where
List<Widget> widgetList1 = List.generate(
5,
(index) => Padding(
padding: EdgeInsets.all(InitialDims.space2),
child: FxText(
"1",
color: InitialStyle.primaryLightColor,
size: InitialDims.normalFontSize,
)));
FxGroupButton(
widgetList: widgetList2,
// onPressedList[]: ,
maxSelected: 3,
initialSelectedindex: 0,
),
where
List<Widget> iconList = [
iconWidget("home"),
iconWidget("bookmarks"),
iconWidget("Gift"),
iconWidget("setting2"),
iconWidget("exit"),
];
Widget iconWidget(String name) {
return FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/name.svg",
color: InitialStyle.primaryLightColor,
size: InitialDims.icon5,
);
}
List<Widget> widgetList2 = List.generate(
5,
(index) => Padding(
padding: EdgeInsets.all(InitialDims.space2),
child: iconList[index]));
FxGroupButton(
widgetList: widgetList2,
// onPressedList[]: ,
initialSelectedindex: 0,
isRadio: true,
),
where
List<Widget> iconList = [
iconWidget("home"),
iconWidget("bookmarks"),
iconWidget("Gift"),
iconWidget("setting2"),
iconWidget("exit"),
];
Widget iconWidget(String name) {
return FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/name.svg",
color: InitialStyle.primaryLightColor,
size: InitialDims.icon5,
);
}
List<Widget> widgetList2 = List.generate(
5,
(index) => Padding(
padding: EdgeInsets.all(InitialDims.space2),
child: iconList[index]));
FxGroupButton(
widgetList: widgetList2,
// onPressedList[]: ,
disabledIndexes: const [0, 3],
initialSelectedindex: 1,
),
where
List<Widget> iconList = [
iconWidget("home"),
iconWidget("bookmarks"),
iconWidget("Gift"),
iconWidget("setting2"),
iconWidget("exit"),
];
Widget iconWidget(String name) {
return FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/name.svg",
color: InitialStyle.primaryLightColor,
size: InitialDims.icon5,
);
}
List<Widget> widgetList2 = List.generate(
5,
(index) => Padding(
padding: EdgeInsets.all(InitialDims.space2),
child: iconList[index]));
FxGroupButton(
widgetList: widgetList2,
// onPressedList[]: ,
direction: Axis.vertical,
initialSelectedindex: 0,
), where
List<Widget> iconList = [
iconWidget("home"),
iconWidget("bookmarks"),
iconWidget("Gift"),
iconWidget("setting2"),
iconWidget("exit"),
];
Widget iconWidget(String name) {
return FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/name.svg",
color: InitialStyle.primaryLightColor,
size: InitialDims.icon5,
);
}
List<Widget> widgetList2 = List.generate(
5,
(index) => Padding(
padding: EdgeInsets.all(InitialDims.space2),
child: iconList[index]));
FxLabel(
isUnique: false,
labelPadding: InitialDims.space0,
widget: FxText(
AppLocalizations.of(context)!.text,
),
),
FxLabel(
isUnique: true,
),
FxLabel(
isUnique: false,
labelPadding: InitialDims.space0,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
),
),
FxLabel(
isUnique: false,
labelPadding: InitialDims.space0,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
),
hasBorder: true,
),
FxLabel(
isUnique: false,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
),
color: InitialStyle.warningColorRegular,
),
FxLabel(
isUnique: false,
widget: Padding(
padding: EdgeInsets.all(InitialDims.icon3),
child: FxButton(
text: AppLocalizations.of(context)!.button,
),
),
size: InitialDims.icon5,
),
and
FxContentLabel(
isUnique: false,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
),
size: InitialDims.icon3,
labelContent: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/Gift.svg",
size: InitialDims.icon3,
color: InitialStyle.primaryLightColor,
),
borderRadius: BorderRadius.all(
Radius.circular(InitialDims.border2))),
first
set route in routs.dart
Then add this widget in the related page as:
FxBreadCrumbNavigator.shaped(
firstRoute: AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.shaped,
backgroundColor: InitialStyle.secondaryDarkColor,
textColor: InitialStyle.secondaryTextColor,
),
first
set route in routs.dart
Then add this widget and the navigation button into other page in the related page as:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxBreadCrumbNavigator.shaped(
firstRoute: AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.shaped,
padding: InitialDims.space1,
),
const FxVSpacer(
big: true,
factor: 3,
),
FxButton(
text: "Go to Second page",
onTap: () {
Navigator.pushNamed(context, '/fc-second-sample-page');
},
)
])
first
set route in routs.dart
Then add this widget in the related page as:
FxBreadCrumbNavigator.shaped(
firstRoute: AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.shaped,
padding: InitialDims.space2,
),
first
set route in routs.dart
Then add this widget in the related page as:
FxBreadCrumbNavigator.simple(
firstRoute: AppLocalizations.of(context)!.breadcrumb,
suffix: FxText(
" > ",
tag: Tag.h3,
),
),
first
set route in routs.dart
Then add this widget in the related page as:
FxBreadCrumbNavigator.icon(
firstRoute: AppLocalizations.of(context)!.breadcrumb,
breadButtonType: BreadButtonType.icon,
rtlSuffixIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CaretLeft.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
ltrSuffixIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CaretRight.svg",
size: InitialDims.icon3,
color: InitialStyle.icon,
),
),
FxPageIndicator(
controller: _controller,
totalPage: _totalPage,
),
where
final PageController _controller = PageController(initialPage: 0);
final int _totalPage = 7;
FxPageIndicator(
controller: _controller,
totalPage: _totalPage,
hasButton: true,
),
where
final PageController _controller = PageController(initialPage: 0);
final int _totalPage = 7;
FxNumberPageIndicator.simple(
controller: _controller,
totalPage: _totalPage,
),
where
final PageController _controller = PageController(initialPage: 0);
final int _totalPage = 7;
FxNumberPageIndicator.simple(
controller: _controller,
totalPage: _totalPage,
hasButton: true,
),}
where
final PageController _controller = PageController(initialPage: 0);
final int _totalPage = 7;
FxNumberPageIndicator.limited(
controller: _controller,
totalPage: _totalPage,
),
where
final PageController _controller = PageController(initialPage: 0);
final int _totalPage = 7;
FxDropdownButton(
num: _num,
buttonName: AppLocalizations.of(context)!.dropDownButton,
menuWidgetList: _menuWidgetList,
menufunctionList: menufunctionList,
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int _num = 3;
List<Widget> menuWidgetList = List.generate(
_num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(_num, (index) => () {});
FxDropdownButton(
num: _num,
buttonWidget: FxButton(
text: AppLocalizations.of(context)!.dropDownButton,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/down.svg",
size: InitialDims.icon2,
color: InitialStyle.onPrimaryColor,
),
clickable: false,
),
menuWidgetList: menuWidgetList,
menufunctionList: menufunctionList,
menuOffset: Offset(InitialDims.space5, 0),
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int _num = 3;
List<Widget> menuWidgetList = List.generate(
_num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(_num, (index) => () {});
FxDropdownButton(
num: _num,
buttonWidget: FxButton(
text: AppLocalizations.of(context)!.dropDownButton,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/infocircle.svg",
size: (InitialDims.icon3),
color: InitialStyle.onPrimaryColor,
),
clickable: false,
),
menuWidgetList: menuWidgetList,
menufunctionList: menufunctionList,
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int _num = 3;
List<Widget> menuWidgetList = List.generate(
_num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(_num, (index) => () {});
FxDropdownButton(
num: num,
buttonName: AppLocalizations.of(context)!.dropDownButton,
menuWidgetList: menuWidgetList,
menufunctionList: menufunctionList,
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int num = 3;
List<Widget> menuWidgetList = List.generate(
num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(num, (index) => () {});
FxDropdownButton(
num: num,
buttonWidget: FxButton(
text: AppLocalizations.of(context)!.dropDownButton,
icon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/down.svg",
size: InitialDims.icon2,
color: InitialStyle.onPrimaryColor,
),
size: InitialDims.titleFontSize,
clickable: false,
),
menuWidgetList: menuWidgetList,
menufunctionList: menufunctionList,
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int num = 3;
List<Widget> menuWidgetList = List.generate(
num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(num, (index) => () {});
FxDropdownButton(
num: num,
menuWidgetList: menuWidgetList,
menufunctionList: menufunctionList,
dropdownWidth: (InitialDims.space20),
),
DropDown2 package should be added in pubspec.yaml 's dependencies
where
int num = 3;
List<Widget> menuWidgetList = List.generate(
num,
(index) => FxText(
"item0",
color: InitialStyle.textColor,
));
List<void Function()> menufunctionList= List.generate(num, (index) => () {});
the carousel_slider package should be added in pubspec.yaml 's dependencies
and is used as:
FxSliderWithIndicator(
controller: _carouselController3,
items: widgetList,
)
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController3 = CarouselController();
The carousel_slider package should be added in pubspec.yaml 's dependencies
and is used as:
FxSliderWithIcon(
controller: _carouselController4,
items: widgetList,
),
where
Widget _titleBox(int index) {
return Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(Radius.circular(InitialDims.border3))),
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
),
);
}
List<Widget> widgetList = List.generate(
3,
(index) => _titleBox(index),
);
final CarouselController _carouselController4 = CarouselController();
FxSimpleTable(
rowsContent: simpleRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
)
],
),
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
FxSimpleTable(
dataRowHeight: (InitialDims.space15),
rowsContent: complexRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
)
],
)
where
List<List<Widget>> complexRowContent() {
return [
[
Padding(
padding: EdgeInsets.symmetric(vertical: InitialDims.space2),
child: FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/img1.jpg",
radius: InitialDims.space5,
),
),
FxText("Name1"),
FxButton(
text: AppLocalizations.of(context)!.button,
),
],
[
Padding(
padding: EdgeInsets.symmetric(vertical: InitialDims.space2),
child: FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/img2.jpg",
radius: InitialDims.space5,
),
),
FxText("Name2"),
FxButton(
text: AppLocalizations.of(context)!.button,
),
],
[
Padding(
padding: EdgeInsets.symmetric(vertical: InitialDims.space2),
child: FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/img3.jpg",
radius: InitialDims.space5,
),
),
FxText("Name3"),
FxButton(
text: AppLocalizations.of(context)!.button,
),
],
];
}
FxSimpleTable(
decoration: BoxDecoration(
color: InitialStyle.primaryDarkColor,
borderRadius: BorderRadius.all(
Radius.circular((InitialDims.border3)))),
headingColor: InitialStyle.primaryDarkColor,
dataRowHeight: (InitialDims.space14),
rowsContent: [
rowContentListDark("packages/fx_flutterap_components/assets/images/img1.jpg"),
rowContentListDark("packages/fx_flutterap_components/assets/images/img2.jpg"),
rowContentListDark("packages/fx_flutterap_components/assets/images/img3.jpg"),
],
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.primaryLightColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.primaryLightColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.primaryLightColor,
)
],
)
where
rowContentListDark(String imagePath) {
return [
Padding(
padding: EdgeInsets.symmetric(vertical: InitialDims.space2),
child: FxAvatarImage(
path: imagePath,
radius: InitialDims.space4,
),
),
FxText(
"Name1",
color: InitialStyle.primaryLightColor,
),
FxButton(
fillColor: InitialStyle.primaryColor,
textColor: InitialStyle.white,
text: AppLocalizations.of(context)!.button,
),
];
}
FxSimpleTable(
headingColor: InitialStyle.primaryColor,
rowsContent: simpleRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.primaryDarkColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.primaryDarkColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.primaryDarkColor,
)
],
)
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
FxSimpleTable(
headingColor: InitialStyle.buttonColor,
zebraColor: InitialStyle.secondaryDarkColor,
zebraMode: true,
rowsContent: simpleRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText("Name",
tag: Tag.h4, color: InitialStyle.onPrimaryColor),
FxText("Profession",
tag: Tag.h4, color: InitialStyle.onPrimaryColor)
],
)
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
FxSimpleTable(
headingColor: InitialStyle.buttonColor,
zebraColor: InitialStyle.primaryDarkColor,
zebraMode: true,
decoration: BoxDecoration(
color: InitialStyle.secondaryDarkColor,
borderRadius:
BorderRadius.all(Radius.circular(InitialDims.border3))),
rowsContent: simpleRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
)
],
)
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
Container(
decoration: BoxDecoration(
border: Border.all(color: InitialStyle.textColor),
borderRadius:
BorderRadius.all(Radius.circular(InitialDims.border3))),
child: FxSimpleTable(
rowsContent: simpleRowContent(),
columnTitle: [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
)
],
),
)
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
FxSimpleTable(
dividerThickness: 0.000001,
rowsContent: simpleRowContent(),
columnTitle: columnTitle(),
)
where
List<List<Widget>> simpleRowContent() {
return [
[
FxText("Id1"),
FxText("Name1"),
FxText("Profession1"),
],
[
FxText("Id2"),
FxText("Name2"),
FxText("Profession2"),
],
[
FxText("Id3"),
FxText("Name3"),
FxText("Profession3"),
],
[
FxText("Id4"),
FxText("Name4"),
FxText("Profession4"),
],
];
}
and
columnTitle() {
return [
FxText(
"Id",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Name",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
),
FxText(
"Profession",
tag: Tag.h4,
color: InitialStyle.onPrimaryColor,
)
];
}
The responsive_table package is added in pubspec.yaml 's dependencies
and is used as:
FxPostTable()
FxGroupList(
widgetList: widgetList,
)
where
List<Widget> widgetList = List.generate(4, (index) {
return FxText(
"Lorem Ipsum is simply 0",
align: TextAlign.start,
overFlowTag: true,
maxLine: 1,
);
});
FxReOrdableList(
widgetList: widgetList,
)
where
List<Widget> widgetList = List.generate(4, (index) {
return FxText(
"Lorem Ipsum is simply 0",
align: TextAlign.start,
overFlowTag: true,
maxLine: 1,
);
});
FxGroupList(
widgetList: widgetList,
divider: Container(),
),
where
List<Widget> widgetList = List.generate(4, (index) {
return FxText(
"لورم ایپسوم متن ساختگی 0",
align: TextAlign.start,
overFlowTag: true,
maxLine: 1,
);
});
FxGroupList(
decoration: BoxDecoration(
border: Border.all(
color: InitialStyle.border,
),
borderRadius:
BorderRadius.all(Radius.circular(InitialDims.border3))),
widgetList: widgetList,
)
List<Widget> widgetList = List.generate(4, (index) {
return FxText(
"Lorem Ipsum is simply 0",
align: TextAlign.start,
overFlowTag: true,
maxLine: 1,
);
});
FxGroupList(
widgetList: complexWidgetList,
itemPadding: EdgeInsets.all(InitialDims.space5),
)
where
List<Widget> complexWidgetList = List.generate(4, (index) {
return Column(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 3,
child: FxContentLabel(
isUnique: false,
size: InitialDims.icon2,
text: "ok",
widget: FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/img1.jpg",
borderRadius: InitialDims.icon2,
),
),
),
Expanded(
flex: 5,
child: FxText(
AppLocalizations.of(context)!.loremmid,
tag: Tag.h3,
overFlowTag: true,
maxLine: 1,
),
),
],
),
FxText(
AppLocalizations.of(context)!.lorem,
align: TextAlign.justify,
),
],
);
});
FxGroupList(
widgetList: widgetList2,
decorationList: decorationList,
),
where
List<Widget> widgetList2 = List.generate(4, (index) {
return FxText(
AppLocalizations.of(context)!.loremmid,
color: InitialStyle.primaryLightColor,
overFlowTag: true,
maxLine: 1,
);
});
List<BoxDecoration> decorationList = List.generate(4, (index) {
if (index == 1) {
return BoxDecoration(color: InitialStyle.specificColor);
} else {
return BoxDecoration(color: InitialStyle.secondaryDarkColor);
}
});
The percent_indicator package is added in pubspec.yaml 's dependencies
and is used as:
LinearPercentIndicator(
barRadius: Radius.circular(InitialDims.icon3),
animation: true,
animationDuration: 1000,
lineHeight: InitialDims.icon2,
percent: 75 / 100,
center: FxText(
"75%",
tag: Tag.h5,
color: InitialStyle.onPrimaryColor,
),
progressColor: InitialStyle.buttonColor,
backgroundColor: InitialStyle.disableColorLight,
),
The percent_indicator package is added in pubspec.yaml 's dependencies
and is used as:
LinearPercentIndicator(
barRadius: Radius.circular((InitialDims.icon3)),
lineHeight: InitialDims.icon2,
percent: 75 / 100,
center: FxText(
"75%",
tag: Tag.h5,
color: InitialStyle.onPrimaryColor,
),
progressColor: InitialStyle.buttonColor,
backgroundColor: InitialStyle.disableColorLight,
),
The percent_indicator package is added in pubspec.yaml 's dependencies
and is used as:
CircularPercentIndicator(
radius: (InitialDims.space5),
lineWidth: InitialDims.icon1,
percent: 75 / 100,
center: FxText(
"75%",
tag: Tag.h5,
color: InitialStyle.textColor,
),
progressColor: InitialStyle.buttonColor,
backgroundColor: InitialStyle.disableColorLight,
),
The percent_indicator package is added in pubspec.yaml 's dependencies
and is used as:
LinearPercentIndicator(
barRadius: Radius.circular((InitialDims.icon3)),
lineHeight: InitialDims.icon2,
percent: 75 / 100,
center: FxText(
"75%",
tag:Tag.h5,
color: InitialStyle.onPrimaryColor,
),
progressColor: InitialStyle.buttonColor,
backgroundColor: InitialStyle.disableColorLight,
),
The percent_indicator package is added in pubspec.yaml 's dependencies
and is used as:
LinearPercentIndicator(
barRadius: Radius.circular((InitialDims.icon3)),
lineHeight: InitialDims.icon2,
percent: 75 / 100,
center: FxText(
"75%",tag:Tag.h5,
color: InitialStyle.primaryLightColor,
),
linearGradient: LinearGradient(colors: [
InitialStyle.primaryDarkColor,
InitialStyle.disableColorLight,
InitialStyle.primaryDarkColor,
InitialStyle.disableColorLight,
InitialStyle.primaryDarkColor,
InitialStyle.disableColorLight,
]),
backgroundColor: InitialStyle.disableColorLight,
),
FxCircularWaitingIndicator(),
and
FxBlinkWaitingIndicator(),
FxCircularWaitingIndicator(
size:InitialDims.space10 ,
),
and
FxBlinkWaitingIndicator(
size: (InitialDims.space10),
),
FxButton(
text: "button",
icon:
child: FxCircularWaitingIndicator(
color: InitialStyle.primaryLightColor,
),
),
FxTypingWaitingIndicator()
SizedBox(
width: 300,
height: 300,
child: FxTopTabBarNavigation(
pageWidgets: pageList, tabWidgets: tabList))
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> pageList = List.generate(
num,
(index) => Container(
height: double.infinity,
color: InitialStyle.section,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
color: InitialStyle.textColor,
size: InitialDims.icon5,
),
FxText(
"Page1",
tag: Tag.h3,
color: InitialStyle.textColor,
),
],
),
));
SizedBox(
width: 300,
height: 300,
child: FxTopTabBarNavigation(
pageWidgets: pageList,
tabWidgets: tabList,
selectedWidget: (int index) {
return FxText(
"Tab1",
tag: Tag.h3,
color: InitialStyle.onPrimaryColor,
);
},
selectedTabDecoration: BoxDecoration(
color: InitialStyle.buttonColor,
borderRadius: BorderRadius.all(
Radius.circular(InitialDims.border2))),
),
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> pageList = List.generate(
num,
(index) => Container(
height: double.infinity,
color: InitialStyle.section,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
color: InitialStyle.textColor,
size: InitialDims.icon5,
),
FxText(
"Page1",
tag: Tag.h3,
color: InitialStyle.textColor,
),
],
),
));
SizedBox(
width: 300,
height: 300,
child: FxTopTabBarNavigation(
pageWidgets: pageList,
tabWidgets: complexTabList,
)),
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> complexTabList = List.generate(num, (index) {
if (index == 1) {
return FxLabel(
isUnique: false,
widget: FxText(
AppLocalizations.of(context)!.text,
),
);
} else {
return FxContentLabel(
isUnique: true,
size: InitialDims.icon3,
text: AppLocalizations.of(context)!.error,
);
}
});
SizedBox(
width: 300,
height: 300,
child: FxBottomTabBarNavigation(
pageWidgets: pageList, tabWidgets: tabList)),
),
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> pageList = List.generate(
num,
(index) => Container(
height: double.infinity,
color: InitialStyle.section,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
color: InitialStyle.textColor,
size: InitialDims.icon5,
),
FxText(
"Page1",
tag: Tag.h3,
color: InitialStyle.textColor,
),
],
),
));
SizedBox(
width: 300,
height: 300,
child: FxSideTabBarNavigation(
pageWidgets: pageList, tabWidgets: tabList)),
),
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> pageList = List.generate(
num,
(index) => Container(
height: double.infinity,
color: InitialStyle.section,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
color: InitialStyle.textColor,
size: InitialDims.icon5,
),
FxText(
"Page1",
tag: Tag.h3,
color: InitialStyle.textColor,
),
],
),
));
SizedBox(
width: 300,
height: 300,
child: FxSideTabBarNavigation(
isleft: false, pageWidgets: pageList, tabWidgets: tabList)),
where
int num = 3;
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
List<Widget> pageList = List.generate(
num,
(index) => Container(
height: double.infinity,
color: InitialStyle.section,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
color: InitialStyle.textColor,
size: InitialDims.icon5,
),
FxText(
"Page1",
tag: Tag.h3,
color: InitialStyle.textColor,
),
],
),
));
FxNavigationBar(
functionList: functionList, tabWidgetList: tabList),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1}",
tag: Tag.h3,
));
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
functionList: functionList,
tabWidgetList: tabList,
activeDecoration: activeDecoration,
inActiveDecoration: inActiveDecoration,
)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> tabList = List.generate(
num,
(index) => FxText(
"Tab1",
tag: Tag.h3,
));
BoxDecoration activeDecoration = BoxDecoration(
border: Border(
top: BorderSide(color: InitialStyle.borderInput),
right: BorderSide(color: InitialStyle.borderInput),
left: BorderSide(color: InitialStyle.borderInput),
),
);
BoxDecoration inActiveDecoration = BoxDecoration(
border: Border(
bottom: BorderSide(color: InitialStyle.borderInput),
),
);
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
functionList: functionList, tabWidgetList: buttonTabList)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> buttonTabList = List.generate(
num,
(index) => FxButton(
text: "Tab1",
clickable: false,
));
List<Widget> buttonTabList = List.generate(
num,
(index) => FxButton(
text: "Tab1",
clickable: false,
));
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
functionList: functionList, tabWidgetList: buttonTabList2)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> buttonTabList2 = List.generate(num, (index) {
if (index == 2) {
return FxButton(
disable: true,
fillColor: InitialStyle.secondaryDarkColor,
text: "Tab1",
clickable: false,
);
}
return FxButton(
text: "Tab1",
clickable: false,
);
});
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
isExpanded: true,
functionList: functionList,
tabWidgetList: buttonTabList)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> buttonTabList = List.generate(
num,
(index) => FxButton(
text: "Tab1",
clickable: false,
));List<Widget> buttonTabList = List.generate(
num,
(index) => FxButton(
text: "Tab1",
clickable: false,
));
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
direction: Axis.vertical,
functionList: functionList,
tabWidgetList: buttonTabList)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> buttonTabList = List.generate(
num,
(index) => FxButton(
text: "Tab1",
clickable: false,
));
Container(
alignment: Alignment.topCenter,
height: height,
child: FxNavigationBar(
functionList: functionList,
tabWidgetList: complexTabList,
)),
where
int num = 3;
bool maxScroll = true;
List<Function()> functionList = List.generate(
num,
(index) => () {
maxScroll
? _controller.jumpTo(_controller.position.maxScrollExtent)
: _controller.jumpTo(_controller.position.minScrollExtent);
maxScroll = !maxScroll;
});
List<Widget> complexTabList = List.generate(num, (index) {
if (index == 1) {
return FxLabel(
isUnique: false,
widget: FxText(
AppLocalizations.of(context)!.text,
),
);
} else {
return FxContentLabel(
isUnique: true,
size: InitialDims.icon3,
text: AppLocalizations.of(context)!.error,
);
}
});
FxAvatarImage(
path: imagePath,
size: InitialDims.icon6,
),
where
String imagePath = "packages/fx_flutterap_components/assets/images/img1.jpg";
FxLabel(
isUnique: false,
widget: FxAvatarImage(
path: imagePath,
),
hasBorder: true,
labelPadding: (InitialDims.space0),
),
where
String imagePath = "packages/fx_flutterap_components/assets/images/img1.jpg";
FxAvatarWidget(
widget: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/teacher.svg",
size: (InitialDims.icon5),
color: InitialStyle.primaryLightColor,
)),
FxAvatarWidget(
backGroundColor: InitialStyle.secondaryDarkColor,
widget: FxText(
AppLocalizations.of(context)!.avatarname,
tag: Tag.h3,
color: InitialStyle.primaryLightColor,
)),
FxAvatarImage(
path: imagePath,
size: InitialDims.icon10,
),
and
FxAvatarImage.rectangle(
path: imagePath,
size: InitialDims.icon10,
),
where
String imagePath = "packages/fx_flutterap_components/assets/images/img1.jpg";
FxAvatarGroup(avatarList: avatarList),
where
List<Widget> avatarList = [
FxAvatarImage(
path: imagePath,
),
FxAvatarWidget(
widget: FxText(
AppLocalizations.of(context)!.avatarname,
tag: Tag.h3,
color: InitialStyle.primaryLightColor,
)),
FxAvatarImage(
path: imagePath,
),
FxAvatarWidget(
backGroundColor: InitialStyle.specificColor,
widget: FxText(
AppLocalizations.of(context)!.avatarname,
tag: Tag.h3,
color: InitialStyle.primaryLightColor,
)),
];
ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(width: 10.0),
scrollDirection: Axis.horizontal,
itemCount: _images.length,
itemBuilder: (context, position) {
return GestureDetector(
child: SizedBox(
height: 200,
width: 200,
child: Image.asset(
_images[position],
fit: BoxFit.cover,
)),
onTap: () {
Navigator.push(
context,
LightBoxRoute(
color: Colors.black54,
builder: (BuildContext context) {
return LightBoxGroup(
initialIndex: position,
imageType: ImageType.asset,
images: _images,
);
},
dismissible: false));
},
);
}),
where
final List<String> images = [
"packages/fx_flutterap_components/assets/images/img1.jpg",
"packages/fx_flutterap_components/assets/images/img2.jpg",
"packages/fx_flutterap_components/assets/images/img3.jpg",
];
GestureDetector(
child: SizedBox(
height: 200,
width: 200,
child: Image.asset(
"packages/fx_flutterap_components/assets/images/img1.jpg",
fit: BoxFit.cover,
)),
onTap: () {
Navigator.push(
context,
LightBoxRoute(
color: Colors.black54,
builder: (BuildContext context) {
return const LightBoxUnique(
image: "packages/fx_flutterap_components/assets/images/img1.jpg",
imageType: ImageType.asset,
);
},
dismissible: true));
},
),
FxZoomingImage(
imageProvider: AssetImage("packages/fx_flutterap_components/assets/images/img3.jpg"),
),
the photo_view package should be added in pubspec.yaml 's dependencies
FxButton(
text: AppLocalizations.of(context)!.smallmodal,
fillColor: InitialStyle.buttonColor,
onTap: () {
FxModal.simple(context,
width: (InitialDims.space25) *2,
height: (InitialDims.space25) ,
content: AppLocalizations.of(context)!.lorem);
},
),
FxButton(
text: AppLocalizations.of(context)!.confirmmodal,
fillColor: InitialStyle.buttonColor,
onTap: () {
FxModal.simple(context,
hasCustomWidget: true,
customWidget: confirmModalCustomWidget());
},
),
where
Widget confirmModalCustomWidget() {
return Container(
constraints: BoxConstraints(
maxWidth: (InitialDims.space25) * 4,
maxHeight: (InitialDims.space25) * 4,
),
child: Padding(
padding: EdgeInsets.all((InitialDims.space5)),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.close,
color: InitialStyle.secondaryDarkColor)),
const FxVSpacer(),
const FxText(
"Are you sure?",tag:Tag.h3,
align: TextAlign.justify,
),
const FxVSpacer(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FxButton(
onTap: () {
Navigator.pop(context);
},
text: "yes",
fillColor: InitialStyle.successColorRegular,
),
const FxHSpacer(),
FxButton(
onTap: () {
Navigator.pop(context);
},
text: "No!",
fillColor: InitialStyle.dangerColorRegular,
),
],
)
],
),
),
),
);
}
FxButton(
text: AppLocalizations.of(context)!.bottomscreenmodal,
fillColor: InitialStyle.buttonColor,
onTap: () {
FxModal.bottom(
context,
barrierDismissible: false,
content: AppLocalizations.of(context)!.lorem,
contentHeight: (InitialDims.space25) *2,
);
},
),
and
FxButton(
text: AppLocalizations.of(context)!.topleftmodal,
fillColor: InitialStyle.buttonColor,
onTap: () {
FxModal.position(context,
alignment: Alignment.topLeft,
content: AppLocalizations.of(context)!.lorem);
},
),
FxButton(
text: AppLocalizations.of(context)!.seriesofmodals,
fillColor: InitialStyle.buttonColor,
onTap: () {
FxModal.simple(context,
hasCustomWidget: true,
customWidget: seriFxModalCustomWidget(
buttonText: "Step2",
onTap: () {
FxModal.position(context,
alignment: Alignment.topRight,
hasCustomWidget: true,
customWidget: seriFxModalCustomWidget(
buttonText: "Step3",
onTap: () {
FxModal.position(context,
alignment: Alignment.topLeft,
hasCustomWidget: true,
customWidget:
seriFxModalCustomWidget(
buttonText: "Step4",
onTap: () {
FxModal.simple(context,
hasCustomWidget: true,
customWidget:
seriFxModalCustomWidget(
buttonText:
"Step5",
onTap: () {
FxModal.simple(
context,
hasCustomWidget:
true,
customWidget:
seriFxModalCustomWidget(
buttonText: AppLocalizations.of(context)!.finish,
));
}));
}));
}));
}));
},
),
where
Widget serialModalCustomWidget(
{void Function()? onTap, String? buttonText}) {
return Container(
constraints: BoxConstraints(
maxWidth: (InitialDims.space25) * 4,
maxHeight: (InitialDims.space25) * 4,
),
child: Padding(
padding: EdgeInsets.all((InitialDims.space5)),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.close,
color: InitialStyle.secondaryDarkColor)),
const FxVSpacer(),
FxText(
AppLocalizations.of(context)!.lorem,
align: TextAlign.justify,
),
FxButton(
text: buttonText ?? "next",
onTap: () {
Navigator.pop(context);
onTap!();
},
)
],
),
),
),
);
}
There are toast messages that the custom type of them are used after adding
fluttertoast package in pubspec.yaml 's dependencies.
and is used as:
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: const Text("This is flutter toast."),
action: SnackBarAction(
label: 'UNDO',
onPressed: ScaffoldMessenger.of(context)
.hideCurrentSnackBar),
));
},
and the default type is used as:
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("This is flutter toast."),
action: SnackBarAction(
label: AppLocalizations.of(context)!.cancel,
onPressed:
ScaffoldMessenger.of(context).hideCurrentSnackBar),
));
},
It is a Tutorial that the tutorial_coach_mark package is added in pubspec.yaml 's dependencies
and is used as:
onTap: () {
Future.delayed(Duration.zero, _showTutorial);
},
void _showTutorial() {
_tutorialCoachMark.show(context: context);
}
void _createTutorial() {
_tutorialCoachMark = TutorialCoachMark(
targets: _createTargets(),
colorShadow: InitialStyle.secondaryDarkColor,
textSkip: "Skip",
paddingFocus: InitialDims.space2,
// opacityShadow: 0.8,
pulseEnable: false,
);
}
List<TargetFocus> _createTargets() {
List<TargetFocus> targets = [];
targets.add(
TargetFocus(
enableOverlayTab: true,
identify: "titleKey",
keyTarget: _titleKey,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_tutorialText("It is title card of page")],
);
},
),
],
shape: ShapeLightFocus.RRect,
),
);
targets.add(
TargetFocus(
enableOverlayTab: true,
identify: "introCardKey",
keyTarget: _introCardKey,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_tutorialText(
"It is intro card of tutorial",
)
],
);
},
),
],
shape: ShapeLightFocus.RRect,
),
);
targets.add(
TargetFocus(
enableOverlayTab: true,
identify: "informationKey",
keyTarget: _informationKey,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_tutorialText(
"It is imformation button of card",
)
],
);
},
),
],
shape: ShapeLightFocus.Circle,
),
);
targets.add(
TargetFocus(
enableOverlayTab: true,
identify: "imageCardKey",
keyTarget: _imageCardKey,
alignSkip: Alignment.topRight,
contents: [
TargetContent(
align: ContentAlign.top,
builder: (context, controller) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_tutorialText(
"It is an image card",
)
],
);
},
),
],
shape: ShapeLightFocus.RRect,
),
);
return targets;
}
_tutorialText(String text) {
return FxText(
text,
tag: Tag.h1,
isBold: true,
color: InitialStyle.primaryDarkColor,
);
}
FxTooltip(
message: AppLocalizations.of(context)!.message,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
fillColor: InitialStyle.buttonColor,
),
rightOffset: InitialDims.space25,
boxDecoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(InitialDims.border2)),
color: InitialStyle.buttonColor)),
FxTooltip(
message: AppLocalizations.of(context)!.message,
showDuration: const Duration(milliseconds: 3000),
widget: FxButton(
text: AppLocalizations.of(context)!.button,
fillColor: InitialStyle.buttonColor,
),
),
FxTooltip(
message: AppLocalizations.of(context)!.message,
widget: FxButton(
text: AppLocalizations.of(context)!.button,
fillColor: InitialStyle.buttonColor,
),
showDuration: const Duration(milliseconds: 500),
preferBelow: false,
),
the art_sweetalert package is added in pubspec.yaml 's dependencies
and is used as:
FxIconButton(
FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/CheckCircle.svg",
size: InitialDims.icon5,
color: InitialStyle.successColorDark,
),
fillColor: InitialStyle.successColorLight,
onTap: () {
ArtSweetAlert.show(
context: context,
artDialogArgs: ArtDialogArgs(
type: ArtSweetAlertType.success,
confirmButtonText:AppLocalizations.of(context)!.ok,
title: AppLocalizations.of(context)!.asuccessfulmessage,
text: AppLocalizations.of(context)!.showaquestionmessagewithanicon,));
},
),
the list_treeview package is added in pubspec.yaml 's dependencies
and the widget located in:
fx_flutterap_components/components/fx_tree_list/fx_tree_list_view.dart
and is used as:
TreeListView()
the list_treeview package is added in pubspec.yaml 's dependencies
and the widget located in:
fx_flutterap_components/components/fx_tree_list/fx_tree_list_view.dart
and is used as:
TreeListView(
favoriteIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/ticksquare.svg",
size: InitialDims.icon3,
),
indicatorIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/square.svg",
size: InitialDims.icon3,
),
)
FxAudioPlayer(
audioURL:
"https://flutterap.com/assets/media/api/dummy/audios/audio.mp3",
fastForwardDuration: Duration(seconds: 10),
fastBackwardDuration: Duration(seconds: 5),
autoplay: false,
)
just_audio package should be added in pubspec.yaml 's dependencies
FxVideoCard(
videoUrl:
"https://flutterap.com/assets/media/api/dummy/videos/video.mp4",
videoTitle: '',
videoDescription: '',
hasCover: false,
)
video_player package should be added in pubspec.yaml 's dependencies
FxVideoCard(
videoUrl:
"https://flutterap.com/assets/media/api/dummy/videos/video.mp4",
videoTitle: '',
videoDescription: '',
hasCover: true,
),
FxVideoCard(
videoUrl:
"https://flutterap.com/assets/media/api/dummy/videos/video.mp4",
videoTitle: '',
videoDescription: '',
forwardIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/forward10seconds.svg",
size: InitialDims.icon5,
color: InitialStyle.primaryLightColor,
),
backwardIcon: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/backward5seconds.svg",
size: InitialDims.icon5,
color: InitialStyle.primaryLightColor,
),
fastForwardDuration: const Duration(seconds: 15),
fastBackwardDuration: const Duration(seconds: 5),
hasCover: true,
)
FxVideoCard(
videoUrl:
"https://flutterap.com/assets/media/api/dummy/videos/video.mp4",
videoTitle: AppLocalizations.of(context)!.loremshort,
videoDescription: AppLocalizations.of(context)!.lorem,
hasCover: true,
)
FxDesktopAudioPlayer(
audioUrl:
"https://flutterap.com/assets/media/api/dummy/audios/audio.mp3"),
audioplayers package should be added in pubspec.yaml 's dependencies
It is used as:FxDesktopVideoPlayer()
dart_vlc package should be added in pubspec.yaml 's dependencies.,
The note that this component has conflict in the cases except desktop,
so if you want to use it in desktop you should :
1-comment out the FxDesktopVideoPlayer() located in fx_flutterap_components/components/fx_player
2-comment out the dart_vlc: (version) located in fx_flutterap_components/pubspec.yaml and get packages.
3-comment out the
// import 'package:dart_vlc/dart_vlc.dart';
and
//DartVLC.initialize(); in
void main() {
// DartVLC.initialize();
runApp(MyApp());
4-comment out
//import 'package:fx_flutterap_components/components/fx_player/fx_desktop_video_player/fx_desktop_video_player.dart';
in FcDesktopMediaPlayer().
5-comment out the // child:FxDesktopVideoPlayer(),
in FcDesktopMediaPlayer().
}
Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Wrap(
spacing: (InitialDims.space10),
runSpacing: InitialDims.space5,
children: [
FxText(
AppLocalizations.of(context)!.emailadress,
),
const FxHSpacer(
big: true,
),
FxTextField(
hint: AppLocalizations.of(context)!.pleaseenteremail,
label: AppLocalizations.of(context)!.pleaseenteremail,
customController: EditTextController(),
),
],
),
Wrap(
spacing: (InitialDims.space10),
runSpacing: InitialDims.space5,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.password,
),
const FxHSpacer(
big: true,
),
FxTextField(
hint: AppLocalizations.of(context)!.pleaseenterpassword,
label:
AppLocalizations.of(context)!.pleaseenterpassword,
customController: EditTextController(),
),
],
),
const FxVSpacer(
big: true,
factor: 3,
),
Wrap(
direction: Axis.horizontal,
spacing: (InitialDims.space10),
runSpacing: InitialDims.space5,
children: [
FxText(
AppLocalizations.of(context)!.radiobuttonsgroup,
),
FxRadioButtonGroupForm(
isScrollable: false,
titleList: List.generate(
3,
(index) =>
"Item1"),
axis: Axis.horizontal,
controller: TextEditingController(),
validator: (TextEditingController? value) {
if (true) {
return "It is neccessary!";
}
},
),
],
),
const FxVSpacer(
big: true,
factor: 3,
),
Wrap(
direction: Axis.horizontal,
spacing: (InitialDims.space10),
runSpacing: InitialDims.space5,
children: [
FxText(
AppLocalizations.of(context)!.checkboxsample,
),
FxCustomCheckBoxForm(
titleWidget: FxText(
AppLocalizations.of(context)!.pleaseselectme,
tag: Tag.h3,
),
value: _value1,
validator: (bool? value) {
return null;
},
),
],
),
const FxHSpacer(
big: true,
factor: 5,
),
FxButton(
text: AppLocalizations.of(context)!.register,
)
]),
where
final bool _value1 = false;
Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.emailadress,
),
const FxVSpacer(
big: true,
),
FxTextField(
hint: AppLocalizations.of(context)!.pleaseenteremail,
label: AppLocalizations.of(context)!.pleaseenteremail,
customController: EditTextController(),
),
const FxVSpacer(),
FxText(
AppLocalizations.of(context)!.pleaseenteremail,
color: InitialStyle.secondaryDarkColor,
),
],
),
const FxVSpacer(
big: true,
factor: 3,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.dropdownsample,
),
const FxVSpacer(
big: true,
),
IntrinsicWidth(
child: FxDropDown(
initialTitle: AppLocalizations.of(context)!.select,
list: _items[1],
value: _value[0],
onChanged: (value) {
setState(() {
_value[0] = value;
});
},
),
),
],
),
const FxHSpacer(
big: true,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.multiselectsample,
),
const FxVSpacer(
big: true,
),
FxCustomCheckboxGroup(
titleList: List.generate(
9,
(index) =>
"Item1"),
controller: _controller,
controllerList: _controllerList,
axis: Axis.vertical,
valueList: List.generate(9, (index) => false),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.radiobuttonsgroup,
),
const FxVSpacer(
big: true,
),
FxRadioButtonGroup(
titleList: List.generate(
9,
(index) =>
"Item1"),
controller: _controller2,
axis: Axis.vertical,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.textareasample,
),
const FxVSpacer(
big: true,
),
IntrinsicHeight(
child: FxTextField(
hint: AppLocalizations.of(context)!.textArea,
label: AppLocalizations.of(context)!.textArea,
customController: EditTextController(),
maxLines: 7,
),
),
],
),
],
),
where
final List<String> _value = List.generate(10, (index) => "");
final TextEditingController _controller = TextEditingController();
final List<TextEditingController> _controllerList =
List.generate(9, (index) => TextEditingController());
final List _items = List.generate(
30,
(index) => [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
]);
FxTextField(
hint: AppLocalizations.of(context)!.textFieldHint,
label: AppLocalizations.of(context)!.textFieldHint,
customController: EditTextController(),
),
FxDropDown(
initialTitle: AppLocalizations.of(context)!.select,
list: _items[4],
value: _value[3],
buttonPadding: EdgeInsets.symmetric(
vertical: InitialDims.space2 * 1.5,
horizontal: InitialDims.space2,
),
onChanged: (value) {
setState(() {
_value[3] = value;
});
},
),
where
final List<String> _value = List.generate(10, (index) => "");
final List _items = List.generate(
30,
(index) => [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
]);
Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.emailadress,
),
const FxVSpacer(
big: true,
),
FxText(
"Email@example.com",
color: InitialStyle.secondaryDarkColor,
),
],
),
const FxVSpacer(
big: true,
factor: 3,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.password,
),
const FxVSpacer(
big: true,
),
FxTextField(
hint: AppLocalizations.of(context)!.pleaseenterpassword,
label: AppLocalizations.of(context)!.pleaseenterpassword,
customController: EditTextController(),
),
],
),
const FxHSpacer(
big: true,
factor: 3,
),
],
),
FxSlider()
Checkbox(
activeColor: InitialStyle.secondaryDarkColor,
//The color to use when this checkbox is checked.
checkColor: InitialStyle.primaryLightColor,
// The color to use for the check icon when this checkbox is checked.
value: _value[1],
onChanged: (value) {
setState(() {
_value[1] = value!;
});
}),
where
final List<bool> _value = List.generate(20, (index) => true);
Transform.scale(
scale: 0.7,
child: CupertinoSwitch(
activeColor: InitialStyle
().successColor()
.successRegular,
onChanged: (bool value) {
setState(() {
_value = value;
});
},
value: _value,
),
where
bool _value=true;
FxSlider(
activeColor: InitialStyle.dangerColorRegular,
thumbColor: InitialStyle.dangerColorRegular,
),
Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
"Test Field - Disabled",
),
const FxVSpacer(
big: true,
),
FxTextField(
hint: AppLocalizations.of(context)!.emailadress,
customController: EditTextController(),
disabled: true,
),
],
),
Wrap(
spacing: InitialDims.space2,
runSpacing: InitialDims.space2,
children: [
FxCustomCheckBox(
disabled: true,
value: _value[12],
onChanged: (value) {
setState(() {
_value[12] = value;
});
}),
FxText(
"Check box - Disabled",
)
],
),
Wrap(
spacing: InitialDims.space2,
runSpacing: InitialDims.space2,
children: [
FxText(
"Radio Buttons - Disabled",
),
RadioListTile(
value: _value[0],
onChanged: (value) {
null;
},
groupValue: false,
),
],
),
Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space2,
children: [
FxText(
"Slider input - Disabled",
),
const FxSlider(
disabled: true,
),
],
),
Wrap(
spacing: InitialDims.space2,
runSpacing: InitialDims.space2,
children: [
Transform.scale(
scale: 0.7,
child: CupertinoSwitch(
activeColor: InitialStyle.secondaryDarkColor,
onChanged: (bool value) {
null;
},
value: _value[0],
),
),
FxText(
"Switch Button - Disabled",
)
],
),
FxButton(
text: AppLocalizations.of(context)!.register,
fillColor: InitialStyle.secondaryDarkColor,
clickable: false,
)
],
),
The mask_text_input_formatter and pattern_formatter packages should be added in pubspec.yaml dependencies as each utility
and are used as:
Wrap(
spacing: (InitialDims.space5) * 2,
runSpacing: (InitialDims.space5),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.shabaNumbertextField,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "IR",
label: AppLocalizations.of(context)!.shabanumberinput,
maskTextInputFormatter: MaskTextInputFormatter(
mask: 'IR-####-####-####-####-####-####',
filter: {"#": RegExp(r'd')},
type: MaskAutoCompletionType.lazy),
customController: EditTextController(),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.phonenumberinput,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "",
label: AppLocalizations.of(context)!.phonenumberinput,
maskTextInputFormatter: MaskTextInputFormatter(
mask: '(###)-##-##-####',
filter: {"#": RegExp(r'd')},
type: MaskAutoCompletionType.lazy),
customController: EditTextController(),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.dateinput,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "",
label: AppLocalizations.of(context)!.dateinput,
maskTextInputFormatter: MaskTextInputFormatter(
mask: '####/##/##',
filter: {"#": RegExp(r'd')},
type: MaskAutoCompletionType.lazy),
customController: EditTextController(),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.timeinput,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "",
label: AppLocalizations.of(context)!.timeinput,
maskTextInputFormatter: MaskTextInputFormatter(
mask: '##:##:##',
filter: {"#": RegExp(r'd')},
type: MaskAutoCompletionType.lazy),
customController: EditTextController(),
// controller: _controller,
// onEditingComplete: (){
// print("okkkkkkkkkkkkkkkk") ;
// print(_controller) ;
// },
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.currencyinput,
),
const FxVSpacer(
big: true,
factor: 2,
),
Row(
children: [
FxText(
AppLocalizations.of(context)!.currencyunit,
),
const FxHSpacer(),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "",
label: AppLocalizations.of(context)!.currencyinput,
maskTextInputFormatter:
ThousandsFormatter(allowFraction: true),
customController: EditTextController(),
),
],
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.ipaddressinput,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxMaskedInputTextField(
textAlign: TextAlign.left,
hint: "",
label: AppLocalizations.of(context)!.ipaddressinput,
maskTextInputFormatter: MaskTextInputFormatter(
mask: '###.###.###.###',
filter: {"#": RegExp(r'd')},
type: MaskAutoCompletionType.lazy),
customController: EditTextController(),
),
],
),
],
),
Wrap(
spacing: (InitialDims.space5) * 2,
runSpacing: (InitialDims.space5),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.sliderwithjustintegerselect,
),
const FxVSpacer(
big: true,
factor: 2,
),
const FxSlider(
min: 0,
max: 10,
divisions: 10,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.sliderwithdoubleselect,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxSlider(
min: 0,
max: 10,
divisions: 100,
subTitleWidget: FxText(
_value1.toString(),
tag: Tag.h3,
),
onChanged: (value) {
setState(() {
_value1 = value!;
});
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.sliderwithcurrencylabel,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxSlider(
min: 0,
max: 7000,
divisions: 100,
subTitleWidget: FxText(
"0.0$",
tag: Tag.h3,
),
onChanged: (value) {
setState(() {
_value2 = value!;
});
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.sliderwithstringchoice,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxSlider(
min: 0,
max: 11,
// divisions: 11,
subTitleWidget: FxText(_mounthList[(_value6.round())]),
onChanged: (value) {
setState(() {
_value6 = value!;
});
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.sliderwithcurrencylabel,
),
const FxVSpacer(
big: true,
factor: 2,
),
FxRangeSlider(
min: 2000,
max: 8000,
divisions: 600,
subTitleWidget: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FxText(
"$2000",
tag: Tag.h3,
),
FxText(
"$8000",
tag: Tag.h3,
),
],
),
onChanged: (values) {
setState(() {
_value3 = values;
});
},
),
],
),
],
),
where
double _value1 = 0;
double _value2 = 0;
RangeValues _value3 = const RangeValues(2000, 8000);
double _value4 = 0;
final List<String> _mounthList = [
"December",
"January",
"February",
"March",
"April",
"MAy",
"June",
"July",
"Agust",
"September",
"October",
"November",
];
FxLabelInput(labelList: labelList2),
and
FxLabelInputSepratedDropDown(labelList: _labelList),
where
final List _labelList = [
{"title": "item1", "_id": "1"},
{"title": "item2", "_id": "2"},
{"title": "item3", "_id": "3"},
{"title": "item4", "_id": "4"},
{"title": "item5", "_id": "5"},
];
List labelList2 = [
{"title": "item1", "_id": "1"},
{"title": "item2", "_id": "2"},
{"title": "item3", "_id": "3"},
{"title": "item4", "_id": "4"},
{"title": "item5", "_id": "5"},
];
FxJalaliDatePicker(
title: AppLocalizations.of(context)!.select,
initialTime: DateTime(1300, 10, 1),
),
the flutter_datetime_picker package should be added in pubspec.yaml
FxEnglishDatePicker(
title: AppLocalizations.of(context)!.select,
initialTime: DateTime(1300, 10, 1),
),
the flutter_datetime_picker package should be added in pubspec.yaml
FxAndroidTimePicker(
title: AppLocalizations.of(context)!.select,
initialTime: TimeOfDay(hour: 7, minute: 7),
),
FxCupertinoTimePicker(
title: AppLocalizations.of(context)!.select,
initialTime: TimeOfDay(hour: 7,minute: 7),
),
the flutter_datetime_picker package should be added in pubspec.yaml
FxCupertino12HTimePicker(
title: AppLocalizations.of(context)!.select,
initialTime: TimeOfDay(hour: 7,minute: 7),
),
the flutter_datetime_picker package should be added in pubspec.yaml
FxFilePicker(
controller: _filePickerController,
),
where
FxFilePickerController _filePickerController = FxFilePickerController();
the file_picker package should be added in pubspec.yaml
The flutter_colorpicker package should be added in pubspec.yaml 's dependencies
and is used as:
FxColorPicker(title: AppLocalizations.of(context)!.selectcolor,)),
the flutter_colorpicker package should be added in pubspec.yaml 's dependencies
and is used as:
FxRingColorPicker(
title: AppLocalizations.of(context)!.selectcolor,)
Wrap(
direction: Axis.horizontal,
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Form(
key: _formkey,
child: Wrap(
spacing: InitialDims.space5,
runSpacing: InitialDims.space5,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.emailadress,
),
const FxVSpacer(
big: true,
),
FxTextFieldForm(
hint: "",
label: AppLocalizations.of(context)!.pleaseenteremail,
validator: (value) {
if (value!.length < 4) {
return AppLocalizations.of(context)!
.theinputlengthistooshort;
}
return null;
},
),
const FxVSpacer(),
FxText(
AppLocalizations.of(context)!.pleaseenteremail,
color: InitialStyle.secondaryDarkColor,
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.dropdownsample,
),
const FxVSpacer(
big: true,
),
IntrinsicWidth(
child: FxDropDownForm(
initialTitle: AppLocalizations.of(context)!.select,
list: _items,
value: _value3,
validator: (value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.multiselectsample,
),
const FxVSpacer(
big: true,
),
FxCustomCheckboxGroupForm(
titleList: List.generate(
9,
(index) =>
"Item1"),
controller: _controller,
controllerList: _controllerList,
axis: Axis.vertical,
valueList: List.generate(9, (index) => false),
validator: (value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectatleastoneitem;
}
return null;
},
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.radiobuttonsgroup,
),
const FxVSpacer(
big: true,
),
FxRadioButtonGroupForm(
titleList: List.generate(
9,
(index) =>
"Item1"),
controller: TextEditingController(),
axis: Axis.vertical,
validator: (value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
],
),
FxCustomCheckBoxForm(
titleWidget: FxText(
AppLocalizations.of(context)!.pleaseselectme,
tag: Tag.h3,
),
value: _value1,
validator: (value) {
if (value == false) {
return AppLocalizations.of(context)!
.youshouldacceptthetermsandconditionsbeforeregister;
}
return null;
},
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
FxText(AppLocalizations.of(context)!.filePicker),
FxFilePickerForm(
onSaved: (String? newValue) {},
validator: (String? value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
controller: _controller2,
),
],
),
FxColorPickerForm(
title: AppLocalizations.of(context)!.selectcolor,
onSaved: (Color? newValue) {},
validator: (Color? value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
FxRingColorPickerForm(
title: AppLocalizations.of(context)!.selectcolor,
onSaved: (Color? newValue) {},
validator: (Color? value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
FxJalaliDatePickerForm(
title: AppLocalizations.of(context)!.select,
onSaved: (String? newValue) {},
validator: (String? value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
FxEnglishDatePickerForm(
title: AppLocalizations.of(context)!.select,
onSaved: (String? newValue) {},
validator: (String? value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
FxCupertinoTimePickerForm(
title: AppLocalizations.of(context)!.select,
onSaved: (String? newValue) {},
validator: (String? value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
FxAndroidTimePickerForm(
title: AppLocalizations.of(context)!.select,
onSaved: (String? newValue) {},
validator: (String? value) {
if (value == "") {
return AppLocalizations.of(context)!
.pleaseselectoneitem;
}
return null;
},
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.labelinput,
),
const FxVSpacer(),
FxLabelInputSepratedDropDownForm(
labelList: _labelList2,
validator: (value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectatleastoneitem;
}
return null;
},
value: '',
),
const FxVSpacer(
big: true,
),
FxLabelInputForm(
labelList: _labelList3,
validator: (value) {
if (value == null) {
return AppLocalizations.of(context)!
.pleaseselectatleastoneitem;
}
return null;
},
value: '',
),
const FxVSpacer()
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.textareasample,
),
const FxVSpacer(
big: true,
),
FxTextFieldForm(
hint: AppLocalizations.of(context)!.textArea,
label: AppLocalizations.of(context)!.textArea,
maxLines: 7,
validator: (value) {
if (value!.length < 4) {
return AppLocalizations.of(context)!
.theinputlengthistooshort;
}
return null;
},
),
],
),
],
),
),
FxButton(
text: AppLocalizations.of(context)!.login,
onTap: () {
if (_formkey.currentState?.validate() == true) {
}
},
)
],
),
where
final _formkey = GlobalKey<FormState>();
final bool _value1 = false;
final List _labelList2 = [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
{"title": "Item4", "_id": "4"},
{"title": "Item5", "_id": "5"},
];
final List _labelList3 = [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
{"title": "Item4", "_id": "4"},
{"title": "Item5", "_id": "5"},
];
final List _items = [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
];
final String _value3 = "";
final TextEditingController _controller = TextEditingController();
final FxFilePickerController _controller2 = FxFilePickerController();
final List<TextEditingController> _controllerList =
List.generate(9, (index) => TextEditingController());
FxStepper(
stepWidgets: stepWidgets1,
titleList: const ["Step1", "Step2", "Step3"],
),
where
List<Widget> stepWidgets1 = [
FxText( AppLocalizations.of(context)!.lorem),
FxText( AppLocalizations.of(context)!.lorem),
FxText( AppLocalizations.of(context)!.lorem),
];
FxStepper(
stepWidgets: stepWidgets2,
nextString: AppLocalizations.of(context)!.next,
backString: AppLocalizations.of(context)!.back,
titleList: const ["Step1", "Step2", "Step3"],
),
where
bool value1 = false;
String value3 = "";
List items = [
{"title": "Item1", "_id": "1"},
{"title": "Item2", "_id": "2"},
{"title": "Item3", "_id": "3"},
];
List<Widget> stepWidgets2 = [
IntrinsicWidth(
child: FxDropDownForm(
initialTitle: AppLocalizations.of(context)!.select,
list: items,
value: value3,
validator: (value) {
if (value == "") {
return AppLocalizations.of(context)!.pleaseselectoneitem;
}
return null;
},
),
),
FxCustomCheckBoxForm(
titleWidget: FxText(
AppLocalizations.of(context)!.pleaseselectme,
tag: Tag.h3,
),
value: value1,
validator: (value) {
if (value == false) {
return AppLocalizations.of(context)!
.youshouldacceptthetermsandconditionsbeforeregister;
}
return null;
},
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FxText(
AppLocalizations.of(context)!.lorem,
color: InitialStyle.black,
),
const FxVSpacer(
big: true,
),
],
),
];
FxStepper(
direction: StepperType.vertical,
stepWidgets: stepWidgets1,
nextString: AppLocalizations.of(context)!.next,
backString: AppLocalizations.of(context)!.back,
titleList: const ["Step1", "Step2", "Step3"],
),
where
List<Widget> stepWidgets1 = [
FxText( AppLocalizations.of(context)!.lorem),
FxText( AppLocalizations.of(context)!.lorem),
FxText( AppLocalizations.of(context)!.lorem),
];
the text_style_editor package is added in pubspec.yaml 's dependencies
and is used as:
FxTextStyleEditor(),
FxSvgIcon("packages/fx_flutterap_components/assets/svgs/ticksquare.svg",
color: _color,
size: _size,),),
where
Color _color= InitialStyle.icon;
double _size=InitialDims.icon5;
font_awesome_flutter icons that the font_awesome_flutter package
is added in pubspec.yaml dependencies
and is used as:
FaIcon(FontAwesomeIcons.gamepad),
FxBill()
The timelines package is added in pubspec.yaml 's dependencies
FxCustomTimeLine(
indicatorList: indicatorList,
contentList: contentList,
)
where
List<Widget> indicatorList = [
FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/avatar1.png",
borderRadius: InitialDims.space5,
),
FxAvatarWidget(
backGroundColor: InitialStyle.specificColor,
widget: FxText(
"L",
tag: Tag.h3,
color: InitialStyle.primaryLightColor,
)),
FxAvatarWidget(
backGroundColor: InitialStyle.primaryLightColor,
widget: FxSvgIcon(
"packages/fx_flutterap_components/assets/svgs/gallery.svg",
size: InitialDims.icon3,
color: InitialStyle.primaryDarkColor,
)),
FxAvatarImage(
path: "packages/fx_flutterap_components/assets/images/avatar4.png",
borderRadius: InitialDims.space5,
),
];
Widget content1() {
return Container(
padding: EdgeInsets.symmetric(
vertical: InitialDims.space1,
horizontal: InitialDims.space1,
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FxText(
AppLocalizations.of(context)!.loremshort,
tag: Tag.h3,
size: InitialDims.normalFontSize,
color: InitialStyle.titleTextColor,
),
const FxVSpacer(
factor: 0.5,
),
FxText(
AppLocalizations.of(context)!.lorem,
align: TextAlign.justify,
color: InitialStyle.textColor,
size: InitialDims.subtitleFontSize,
overFlowTag: true,
maxLine: 1,
),
const FxVSpacer(),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.access_time,
size: InitialDims.icon2,
color: InitialStyle.textColor,
),
const FxHSpacer(),
FxText(
"9:40 " +AppLocalizations.of(context)!.am,
tag: Tag.h5,
color: InitialStyle.textColor,
)
],
)
],
),
),
);
}
Widget content2() {
double imageSize = (InitialDims.space14);
return Container(
padding: EdgeInsets.symmetric(
vertical: InitialDims.space1,
horizontal: InitialDims.space1,
),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Image.asset(
"packages/fx_flutterap_components/assets/images/img1.png",
width: imageSize,
height: imageSize,
fit: BoxFit.cover,
),
const FxHSpacer(),
Image.asset(
"packages/fx_flutterap_components/assets/images/img2.png",
width: imageSize,
height: imageSize,
fit: BoxFit.cover,
),
const FxHSpacer(),
Image.asset(
"packages/fx_flutterap_components/assets/images/img3.png",
width: imageSize,
height: imageSize,
fit: BoxFit.cover,
),
],
),
const FxVSpacer(),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.access_time,
size: InitialDims.icon2,
color: InitialStyle.secondaryDarkColor,
),
const FxHSpacer(),
FxText(
"20.10.2018",
tag: Tag.h5,
)
],
)
],
),
),
);
}
List<Widget> contentList = [
content1(),
content1(),
content2(),
content1(),
];
ProcessTimelinePage()
PackageDeliveryTrackingPage()
FxPriceCard(
price: priceList[0],
titleList: titleList,
checkList: checkList1,
),
where
List<String> titleList = List.generate(
6,
(index) => AppLocalizations.of(context)!.loremshort,
);
List<bool> checkList1 = [true, true, false, false, false, false];
FxComplexPriceCard(
priceList: priceList,
titleList: titleList,
checkList: checkListTotal,
),
where
List<String> titleList = List.generate(
6,
(index) => AppLocalizations.of(context)!.loremshort,
);
List<String> priceList = [
AppLocalizations.of(context)!.free,
"127$",
"721$",
];
List<List<bool>> checkListTotal = [checkList1, checkList2, checkList3];
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: FxSearchTextField(
width: (InitialDims.space25) * 4,
nightMode: nightMode,
)),
const FxVSpacer(
big: true,
factor: 5,
),
Expanded(
flex: 20,
child: FxTopTabBarNavigation(
pageWidgets: pageList, tabWidgets: tabList),
),
],
),
where
int num = 4;
int num2 = 20;
List<String> titleList = [
AppLocalizations.of(context)!.classic,
AppLocalizations.of(context)!.articles,
AppLocalizations.of(context)!.users,
AppLocalizations.of(context)!.images,
];
List<Widget> tabList = List.generate(
num,
(index) => FxText(
titleList[index],
tag: Tag.h3,
));
List<Widget> articleCardList =
List.generate(num2, (index) => FxArticleSearchCard());
List<Widget> iamgeCardList =
List.generate(num2, (index) => FxImageSearchCard());
List<Widget> userCardList =
List.generate(num2, (index) => FxUserSearchCard());
List<Widget> pageList = [
FxSearchResult(
num: num2,
searchWord: AppLocalizations.of(context)!.loremshort,
),
FxSearchResult(
num: num2,
searchWord: AppLocalizations.of(context)!.loremshort,
cardWidgetList: articleCardList,
),
FxSearchResult(
num: num2,
searchWord: AppLocalizations.of(context)!.loremshort,
cardWidgetList: userCardList,
),
FxSearchResult(
num: num2,
searchWord: AppLocalizations.of(context)!.loremshort,
cardWidgetList: iamgeCardList,
),
];
The syncfusion_flutter_maps package is added in pubspec.yaml 's dependencies
and used as:
FxShowLocation(
latitude: 21.4735,
longitude: 55.9754,
initialZoomLevel: 5,
),
FxBlockApiSample()
FxPrint(
widget: FxBill(
isPrinting: true,
),
)
the screenshot and printing packages should be added in pubspec.yaml 's dependencies
FutureBuilder<Uint8List>(
future: _getImage(),
builder: (context, AsyncSnapshot<Uint8List> snapshot) {
if (snapshot.hasData) {
return FxSaveFile(
fileData: snapshot.data ?? fileData,
);
}
return CircularProgressIndicator(
color: InitialStyle.primaryDarkColor,
);
},
),
where
Future<Uint8List> _getImage() async{
final ByteData bytes = await rootBundle.load(path);
final Uint8List _fileData_new = bytes.buffer.asUint8List();
return _fileData_new;
}
the file_saver package should be added in pubspec.yaml 's dependencies
FxScreenShot(
//the widget should not wrapped into scaffold
widget: FxBill(),
onUint8List: (uint8List) {},
)
the screenshot package should be added in pubspec.yaml 's dependencies
flutter_local_notifications should be added in pubspec.yaml dependencies.
