The way to implement Element UI with Flutter (Button)

Code repository address: github.com/1124863805/…

Demo deployment website: ele.d0.pub/

Mouse move to remove selected effect, selected mouse gesture, basic imitation similar; Load the animation using the extracted Element icon.

The final implementation may be some differences, the code is different, add their own understanding, little brother is not talented, if there is a mistake more advice.

Button Address: juejin.cn/post/695195…

Radio menu box: juejin.cn/post/695196…

Pay attention to

Render using HTML, CSS, Canvas and SVG elements, the application size is relatively small.

Compile Skia into WebAssembly format using CanvasKit rendering and use WebGL rendering. Application consistency on mobile and desktop provides better performance and reduces the risk of inconsistent rendering across browsers. But the size of the application will increase by about 2MB.

CanvasKit uses this packaging method, which results in Chinese garbled characters when the font is not fully loaded and is not as fast as the FIRST HTML rendering I used, see The Web Renderer for details

-- Two different methods of flutter run -d chrome --web-renderer HTML flutter build web --web-renderer canvaskitCopy the code

Normal button

                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "Default button",
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "Main button",
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "Success button",
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "Info button",
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "Warning button",
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "Danger button",),),Copy the code

A simple button

Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "Plain button",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "Main button",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "Success button",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "Info button",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "Warning button",
                      plain: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "Danger button",
                      plain: true,),,)Copy the code

The rounded button

    Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "Rounded button",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "Main button",
                      round: true,
                    ),
                    ElButton(
                        type: ElButtonType.success, text: "Success button", round: true),
                    ElButton(
                      type: ElButtonType.info,
                      text: "Info button",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "Warning button",
                      round: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "Danger button",
                      round: true,),,)Copy the code

Circular icon button

    Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_search,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_edit,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      circle: true,
                      iconData: EleIcons.el_icon_check,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      circle: true,
                      plain: true,
                      iconData: EleIcons.el_icon_message,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      circle: true,
                      iconData: EleIcons.el_icon_star_off,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      circle: true,
                      iconData: EleIcons.el_icon_delete,
                    ),
                  ],
                )
Copy the code

Prohibited button

     Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ElButton(
                      text: "Default button",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      text: "Main button",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.success,
                      text: "Success button",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.info,
                      text: "Info button",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.warning,
                      text: "Warning button",
                      disabled: true,
                    ),
                    ElButton(
                      type: ElButtonType.danger,
                      text: "Danger button",
                      disabled: true,),,)Copy the code

The text button

     Row(
                  children: [
                    ElButton(
                      type: ElButtonType.text,
                      text: "Text button",
                    ),
                    ElButton(
                      type: ElButtonType.text,
                      text: "Text button",
                      plain: true,
                      disabled: true,),,)Copy the code

Icon button

     Row(
                  children: [
                    ElButton(
                      type: ElButtonType.primary,
                      // text: "text button ",
                      iconData: EleIcons.el_icon_edit,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_share,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_delete,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_search,
                      text: "Search",
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    ElButton(
                      type: ElButtonType.primary,
                      iconData: EleIcons.el_icon_upload,
                      iconPositoin: ElButtonIconPositoin.right,
                      text: "Upload",),,)Copy the code

Button group

     Row(
                  children: [
                    ElButtonGroup(
                      children: [
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_arrow_left,
                          text: "Previous page",
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_arrow_right,
                          iconPositoin: ElButtonIconPositoin.right,
                          text: "Next page",
                        ),
                      ],
                    ),
                    SizedBox(width: 20),
                    ElButtonGroup(
                      children: [
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_edit,
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_share,
                        ),
                        ElButton(
                          type: ElButtonType.primary,
                          iconData: EleIcons.el_icon_delete,
                        ),
                      ],
                    ),
                  ],
                )
Copy the code

In the load

    Row(
                  children: [
                    ElButton(
                      type: ElButtonType.primary,
                      text: "Loading",
                      loading: true,
                      disabled: true,),,)Copy the code

Different sizes

    Row(
                  children: [
                    ElButton(
                      text: "Default button",
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "Medium button",
                      size: ElSize.medium,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "Little button",
                      size: ElSize.small,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      size: ElSize.mini,
                      text: "Super tiny button",
                    ),
                  ],
                ),
                SizedBox(height: 20),
                Row(
                  children: [
                    ElButton(
                      text: "Default button",
                      round: true,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "Medium button",
                      round: true,
                      size: ElSize.medium,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      text: "Little button",
                      round: true,
                      size: ElSize.small,
                    ),
                    SizedBox(width: 10),
                    ElButton(
                      size: ElSize.mini,
                      round: true,
                      text: "Super tiny button",),,)Copy the code