Flutter UI组件插件fastor_app_ui_widget的使用

Flutter UI组件插件fastor_app_ui_widget的使用

特性

• 减少28%的字符数和换行符。
• 解决渲染问题，如RenderFlex溢出像素。
• 基础UI组件带有额外功能，例如 PageFastor, TextFastor, ImageFastor, RowFastor, ColumnFastor, TextFieldFastor 等。
• 可以在常规的 Flutter 组件中使用快速组件，并且可以反过来使用。
• 使用工具类帮助更快地编码。例如：NetworkManager, LanguageTools 等。

开始使用

1. 在 yaml 文件中添加依赖

dependencies:
  fastor_app_ui_widget:

2. 在任何类中导入包

import 'package:fastor_app_ui_widget/fastor_app_ui_widget.dart';

3. 初始化应用

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Fastor.initializeApp();
  runApp(const MyApp());
}

教程内容

PageFastor

滚动屏幕

• 通过使用 PageFastor 解决 RenderFlex 溢出问题。

@override
Widget build(BuildContext context) {
  return PageFastor(
    this,
    content: getContent(),
  );
}

Widget getContent() {
  return Column(
    children: getLongDataForTestScroll(),
  );
}

List<Widget> getLongDataForTestScroll() {
  List<Widget> data = [];
  for (int i = 1; i <= 70; i++) {
    var w = TextFastor(
      "Get ride of RenderFlex, data number $i",
      fontSize: 15,
      width: 300,
      color: Colors.yellow,
      margin: EdgeInsets.all(5),
    );
    data.add(w);
  }
  return data;
}

自定义工具栏形状

• 创建任意形状的工具栏并将其放置在页面模板中。

@override
Widget build(BuildContext context) {
  return PageFastor(
    this,
    toolbar: ToolbarSimpleFastor(context, "Page Shapes"),
    toolbar_height: 70,
    content: getContent(),
  );
}

背景功能

• 设置背景图像或自定义小部件，使其随着内容滚动而保持固定。

@override
Widget build(BuildContext context) {
  return PageFastor(
    this,
    toolbar: ToolbarSimpleFastor(context, "Page Shapes"),
    toolbar_height: 70,
    assetBackground: const AssetImage("assets/images/background.png"),
    assetBackgroundOpacity: 0.3,
    content: getContent(),
  );
}

底部导航

• 设置底部导航栏以在多个屏幕之间切换。

@override
Widget build(BuildContext context) {
  return PageFastor(
    this,
    toolbar: ToolbarSimpleFastor(context, "Page Shapes"),
    toolbar_height: 70,
    navigationBottom: NavigationFastor(context, 0),
    navigationBottom_height: 70,
    homeButtonsBackgroundColor: HexColor("#1593bc"),
    content: getContent(),
  );
}

ScaffoldFastor

透明页面导航

• 使用 NavigationTools 进行透明页面导航。

NavigationTools.pushTransparent(SimpleScreen());

TextFastor

文本快速组件

• 使用 TextFastor 减少28%的字符数和换行符。

TextFastor(
  "Text Fastor Simple",
  textAlign: TextAlign.center,
  textDecoration: TextDecoration.underline,
  color: Colors.blue,
  fontSize: 25,
  fontFamily: FontProject.marina,
  margin: EdgeInsets.all(25),
  padding: EdgeInsets.all(10),
  decoration: BoarderHelper.cardView(
    colorLine: Colors.red,
    colorBackground: Colors.yellow,
    radiusSize: 15,
  ),
  maxLines: 2,
  onPressed: () {
    Log.i("click on fastor widget");
  },
);

ButtonFastor

按钮快速组件

• 使用 ButtonFastor 减少28%的字符数和换行符。

ButtonFastor(
  "Button Fastor",
  () {
    print("click on btn type fastor");
  },
  margin: EdgeInsets.symmetric(vertical: 40),
  textColor: Colors.blue,
  background: Colors.black,
  fontFamily: FontProject.marina,
  textFontSize: 15,
  borderLine: Colors.blue,
  borderRadius: 15,
);

ImageFastor

图像快速组件

• 使用 ImageFastor 设置图像类型、圆角、背景颜色、透明度、按下事件和边距。

ImageFastor(
  context: context,
  width: 278,
  height: 181,
  margin: EdgeInsets.all(10),
  radius_all: 25,
  boxFit_background: BoxFit.cover,
  urlBackground: square_url_image_example,
  colorBackground: Colors.amber,
  opacity: 0.7,
  onPressed: () {
    print("click on image");
  },
);

RowFastor

行快速组件

• 使用 RowScrollFastor 水平滚动解决 RenderFlex 溢出问题。

RowScrollFastor(
  children: getChildren(),
);

ColumnFastor

列快速组件

• 使用 ColumnFastor 设置装饰、间距和对齐方式。

ColumnFastor(
  children: getChildren(),
  margin: EdgeInsets.only(top: 20, bottom: 20, left: 60, right: 60),
  padding: EdgeInsets.all(5),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.red),
    borderRadius: BorderRadius.all(Radius.circular(15)),
    color: Colors.yellow,
  ),
);

TextFieldFastor

文本框快速组件

• 使用 TextFieldFastor 设置文本框的各种属性。

TextFieldFastor(
  autovalidateMode: email_valid,
  margin: EdgeInsets.only(top: 10),
  padding: EdgeInsets.all(5),
  background_color: Colors.white,
  validator: ValidatorTemplate.email(),
  keyboardType: TextInputType.emailAddress,
  onChanged: (s) {
    email_txt = s;
    Log.i("tf_email() - change s: $s ");
  },
);

CheckboxFastor

复选框快速组件

• 使用 CheckboxFastor 设置颜色、文本样式和移除默认填充。

CheckboxFastor(
  context: context,
  value: isAgree,
  margin: EdgeInsets.only(top: 10),
  text: "Are you agree to terms and condition.",
  text_color: Colors.brown,
  text_dimen: 20,
  color_inactive: Colors.brown,
  color_active: Colors.green,
  onChanged: (updatedValue) {
    setState(() {
      isAgree = updatedValue!;
    });
  },
);

SwitchFastor

开关快速组件

• 使用 SwitchFastor 设置开关状态。

SwitchFastor(
  defaultValue: cubit!.createReservation.isVip,
  onChange: (updateStatus) {
    Log.i("_switchVipButton() updateStatus: $updateStatus");
    cubit!.switchVipStatus(updateStatus);
  },
);

ScrollFastor

滚动快速组件

• 使用 ScrollFastor 设置滚动视图。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: createUI(),
  );
}

Widget createUI() {
  var scrollPage = ScrollFastor(child: contentFormColumn());

  var cont = Container(
    padding: EdgeInsets.only(top: ToolbarCustom.heigh),
    margin: EdgeInsets.only(left: 16, right: 16, bottom: 16),
    child: scrollPage,
  );

  return Stack(
    children: [
      cont,
      ToolbarCustom(pageContext: context, title: "Add Reservation"),
    ],
  );
}

Widget contentFormColumn() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Text("input field 1"),
      Text("input field 2"),
      Text("input field 3"),
      Text("input field 4"),
      Text("input field 5"),
      Text("input field 6"),
      Text("input field 7"),
    ],
  );
}

TableFastor

表格快速组件

• 使用 TableFastor 设置表格的滚动功能。

TableFastor(
  listRow: listRow,
  showProgress: showProgress,
  sizeProgress: sizeProgress,
  colorProgress: colorProgress,
);