mx_widget 0.2.0 
mx_widget: ^0.2.0 copied to clipboard
覆盖flutter项目开发时需要使用的大部分组件。
import 'dart:async';
import 'package:example/custom_upload_hooks.dart';
import 'package:example/test.dart';
import 'package:flutter/material.dart';
import 'package:mx_widget/mx_widget.dart';
void main() {
runApp(const MyApp());
}
/// 组件示例项目
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MXTheme(
/// 需要将themeConfig放在前面先执行才能使自定义主题生效，否则主题的配置还是默认的
themeConfig: MXThemeConfig.cacheThemeConfig(customThemeConfig: {
// "color": {
// "brandColor1": "#FFF8F2",
// "brandColor2": "#FDDAC6",
// "brandColor3": "#ECAE91",
// "brandColor4": "#BE7055",
// "brandColor5": "#652B1C",
// "brandColor6": "#56180E",
// "brandColor7": "#460D07",
// "brandColor8": "#360605",
// "brandColor9": "#260303",
// "brandPrimaryColor": "#652B1C",
// "brandFocusColor": "#BE7055",
// "brandDisabledColor": "#ECAE91",
// "brandClickColor": "#56180E"
// }
}),
widget: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
colorScheme: ColorScheme.light(
primary: MXTheme.of(context).brandPrimaryColor)),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
));
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
MXButtonThemeEnum themeEnum = MXButtonThemeEnum.primary;
TabController? _tabController;
bool disabled = false;
MXCheckBoxSeriesController controller = MXCheckBoxSeriesController();
TextEditingController textEditingController = TextEditingController();
MXAuthCodeController mxAuthCodeController = MXAuthCodeController(
codeNum: 6,
onConfirm: (p0) {},
);
late MXCountDownController countDownController;
late MXProgressController progressController;
late MXProgressController progressControllerCirc;
late MXStepsController stepsController;
late MXStepsController stepsController2;
late MXSideBarController sideBarController;
late MXSideBarController sideBarController2;
late MXFabButtonController fabButtonController;
late MXCascaderController mxCascaderController;
late MXFormController mxFormController;
late MXCalendarController mxCalendarController;
late MXIndexesController mxIndexesController;
late MXUploadImgController mxUploadImgController;
@override
void initState() {
super.initState();
countDownController = MXCountDownController(
time: 1000 * 10,
onFinish: () {
MXToast().toastBySuccess(context, '倒计时结束');
},
);
_tabController = TabController(length: 4, vsync: this);
progressController = MXProgressController(initValue: 25);
progressControllerCirc = MXProgressController(initValue: 25);
sideBarController = MXSideBarController(
sideBarItemBuilder: (model, isActivity) {
return Container(
width: 120,
padding: const EdgeInsets.all(10),
child: Center(
child: Container(
decoration: BoxDecoration(
gradient: isActivity
? LinearGradient(colors: [
MXTheme.of(context).brandPrimaryColor,
MXTheme.of(context).brandColor8,
])
: null,
borderRadius:
BorderRadius.circular(MXTheme.of(context).radiusRound)),
padding:
const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
child: MXText(
font: MXTheme.of(context).fontBodySmall,
data: model.title,
textColor: isActivity
? MXTheme.of(context).whiteColor
: MXTheme.of(context).fontUsePrimaryColor,
),
),
),
);
},
sideBarItemList: [
MXSideBarItemModel(
title: '自定义样式',
id: "1",
builder: (index) {
return Container(
color: MXTheme.of(context).whiteColor,
child: MXGrid(
space: 0,
useBorder: false,
size: MXGirdSizeEnum.medium,
column: 3,
gridItemAxis: Axis.vertical,
itemList: List.generate(
40,
(index) => MXGridItemModel(
title: '标题文字',
netUrl:
'https://test-technology.oss-cn-hangzhou.aliyuncs.com/Web/system/20220831/image/623263909669acc4da4f61195e9c1a5d.jpg',
),
)),
);
},
),
MXSideBarItemModel(
title: '面部精华',
id: "2",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).successPrimaryColor,
);
},
),
MXSideBarItemModel(
title: '乳液面霜',
id: "3",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).errorPrimaryColor,
);
},
),
MXSideBarItemModel(
title: '眼部护理',
id: "4",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).warnPrimaryColor,
);
},
)
]);
sideBarController2 = MXSideBarController(sideBarItemList: [
MXSideBarItemModel(
title: '柏溪推荐',
id: "1",
builder: (index) {
return Container(
color: MXTheme.of(context).whiteColor,
child: MXGrid(
space: 0,
useBorder: false,
size: MXGirdSizeEnum.medium,
column: 3,
gridItemAxis: Axis.vertical,
itemList: List.generate(
40,
(index) => MXGridItemModel(
title: '标题文字',
netUrl:
'https://test-technology.oss-cn-hangzhou.aliyuncs.com/Web/system/20220831/image/623263909669acc4da4f61195e9c1a5d.jpg',
),
)),
);
},
),
MXSideBarItemModel(
title: '面部精华',
id: "2",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).successPrimaryColor,
);
},
),
MXSideBarItemModel(
title: '乳液面霜',
id: "3",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).errorPrimaryColor,
);
},
),
MXSideBarItemModel(
title: '眼部护理',
id: "4",
builder: (index) {
return Container(
height: 1200,
color: MXTheme.of(context).warnPrimaryColor,
);
},
)
]);
stepsController = MXStepsController(
stepsItems: [
MXStepsItemModel(
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息描述信息描述信息',
pluginWidget: Container(
height: 300,
color: Colors.red,
)),
MXStepsItemModel(
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息'),
MXStepsItemModel(
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息'),
MXStepsItemModel(
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息')
],
onAction: () {},
);
stepsController2 = MXStepsController(
stepsItems: [
MXStepsItemModel(
icon: Icons.public_outlined,
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息',
pluginWidget: Container(
height: 300,
color: Colors.red,
)),
MXStepsItemModel(
icon: Icons.public_outlined,
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息'),
MXStepsItemModel(
icon: Icons.public_outlined,
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息'),
MXStepsItemModel(
icon: Icons.public_outlined,
title: '未完成',
pastTitle: '已完成',
activityTitle: '当前步骤',
description: '描述信息')
],
onAction: () {},
);
fabButtonController = MXFabButtonController(
context: context,
model: MXFabButtonModel(
icon: Icons.check,
text: '按钮文字',
afterClickButtonCallback: () {
MXToast().toastBySuccess(context, "点击成功");
},
themeEnum: MXButtonThemeEnum.primary,
sizeEnum: MXButtonSizeEnum.large));
mxCascaderController = MXCascaderController(
onChange: (id, lastSelectOption) {},
onClose: () {
// print('关闭');
},
onPick: (lastSelectOption) {
// print(lastSelectOption);
},
options: [
MXCascaderOptions(label: "北京市", value: "110000", children: [
MXCascaderOptions(label: "北京市", value: "110100", children: [
MXCascaderOptions(
label: "东城区",
value: "110101",
),
MXCascaderOptions(
label: "西城区",
value: "110102",
),
MXCascaderOptions(
label: "丰台区",
value: "110105",
),
MXCascaderOptions(
label: "石景山区",
value: "110106",
),
MXCascaderOptions(
label: "海淀区",
value: "110107",
),
MXCascaderOptions(
label: "门头沟区",
value: "110108",
),
MXCascaderOptions(
label: "房山区",
value: "110109",
),
MXCascaderOptions(
label: "通州区",
value: "110110",
),
]),
]),
MXCascaderOptions(label: "天津市", value: "120000", children: [
MXCascaderOptions(
value: '120100',
label: '天津市',
children: [
MXCascaderOptions(value: '120101', label: '和平区'),
MXCascaderOptions(value: '120102', label: '河东区'),
MXCascaderOptions(value: '120103', label: '河西区'),
MXCascaderOptions(value: '120104', label: '南开区'),
],
),
])
]);
mxFormController = MXFormController(rules: {
'switch': [MXFormRule(required: false, message: '请选择开关')],
'rate': [
MXFormRule(
required: true,
message: '分数过低',
validator: (value) {
if (value < 3.0) {
return MXFormRuleResult(result: false, message: '自定义错误提示');
}
return MXFormRuleResult(result: true);
},
)
],
});
mxCalendarController = MXCalendarController(
// defaultValue: MXCalendarValueByRange(
// startTime: DateTime(2021, 1, 22), endTime: DateTime(2021, 1, 26)),
// defaultValue: [DateTime(2021, 1, 22), DateTime(2021, 1, 26)],
// defaultValue: DateTime(2021, 1, 22),
aweakColor: MXTheme.of(context).errorPrimaryColor,
weaknessColor: MXTheme.of(context).errorColor2,
typeEnum: MXCalendarTypeEnum.range,
minDate: MXCalendarTime(2021, 1, 15),
maxDate: MXCalendarTime(2021, 12, 3),
onSelect: (DateTime time) {
print(time);
},
// dayBuilder: (context, currentTime,
// {isActivity, isDisabled, isEnd, isRange, isStart}) {
// String text = currentTime.day.toString();
// Color textColor = MXTheme.of(context).fontUsePrimaryColor;
// if (isStart != null && isStart) {
// text = '放假';
// textColor = MXTheme.of(context).whiteColor;
// } else if (isEnd != null && isEnd) {
// text = '上班';
// textColor = MXTheme.of(context).whiteColor;
// } else if (isDisabled != null && isDisabled) {
// textColor = MXTheme.of(context).fontUseDisabledColor;
// }
// return Center(
// child: MXText(
// data: text,
// font: MXTheme.of(context).fontBodyMedium,
// fontWeight: FontWeight.bold,
// textColor: textColor,
// ),
// );
// },
);
mxIndexesController = MXIndexesController(
model: [
MXIndexesModel(index: "A", children: <String>[
'阿坝',
'阿拉善',
'阿里',
'安康',
]),
MXIndexesModel(index: "B", children: <String>[
'北京',
'白银',
'保定',
'宝鸡',
'保山',
'包头',
'巴中',
'北海',
'蚌埠',
'本溪',
'毕节',
'滨州',
'百色',
'亳州',
]),
MXIndexesModel(index: "C", children: <String>[
'重庆',
'成都',
'长沙',
'长春',
'沧州',
'常德',
'昌都',
'长治',
'常州',
'巢湖',
'潮州',
'承德',
'郴州',
'赤峰',
'池州',
'崇左',
'楚雄',
'滁州',
'朝阳',
]),
MXIndexesModel(index: "D", children: <String>[
'大连',
'东莞',
'大理',
'丹东',
'大庆',
'大同',
'大兴安岭',
'德宏',
'德阳',
'德州',
'定西',
'迪庆',
'东营',
]),
MXIndexesModel(index: "E", children: <String>['鄂尔多斯', '恩施', '鄂州']),
MXIndexesModel(
index: "F",
children: <String>['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳']),
MXIndexesModel(index: "G", children: <String>[
'广州',
'桂林',
'贵阳',
'甘南',
'赣州',
'甘孜',
'广安',
'广元',
'贵港',
'果洛'
]),
],
contentItemBuilder: <String>(String params) {
return Container(
child: MXCell(
model: MXCellModel(title: params.toString()), padding: 16));
});
mxUploadImgController = MXUploadImgController(
hooks: CustomUploadHooks(),
actionUrl: 'https://mx-admin-oa.oss-cn-hangzhou.aliyuncs.com',
uploadType: MXUploadImgType.multiply,
maxNum: 6,
defaultValue: [
'https://tdesign.gtimg.com/miniprogram/images/example4.png',
'https://tdesign.gtimg.com/miniprogram/images/example4.png',
],
);
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title)),
bottomNavigationBar: MXBottomNavBar(
defaultActiviteIndex: 2,
useTopBorder: true,
useSafeArea: true,
bottomNavBarTypeEnum: MXBottomNavBarTypeEnum.iconText,
bottomNavBarShapeEnum: MXBottomNavBarShapeEnum.rectangle,
bottomNavBarItemTypeEnum: MXBottomNavBarItemTypeEnum.weak,
bottomNavBarItemList: [
MXBottomNavBarItemConfig(
onTap: () {},
mxBottomNavBarIconTextConfig:
MXBottomNavBarIconTextConfig(text: '页面'),
mxBottomNavBarItemBadgeConfig:
MXBottomNavBarItemBadgeConfig(show: true)),
MXBottomNavBarItemConfig(
onTap: () {},
mxBottomNavBarIconTextConfig:
MXBottomNavBarIconTextConfig(text: '页面')),
MXBottomNavBarItemConfig(
onTap: () {},
mxBottomNavBarIconTextConfig:
MXBottomNavBarIconTextConfig(text: '页面')),
MXBottomNavBarItemConfig(
onTap: () {},
mxBottomNavBarIconTextConfig:
MXBottomNavBarIconTextConfig(text: '页面')),
]),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MXInput(
controller: textEditingController,
formatEnum: MXInputFormatEnum.number,
onChange: (value) {},
),
MXTextArea(
controller: textEditingController,
onChange: (value) {
print('textArea value: $value');
},
)
],
),
)
],
));
}
}Metadata
2
likes
125
points
188
downloads
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
覆盖flutter项目开发时需要使用的大部分组件。
Repository (GitHub)
View/report issues
License
BSD-3-Clause (license)
Dependencies
dio, flutter, flutter_swiper_null_safety, wechat_assets_picker
