Flutter UI组件插件xapptor_ui的使用

Flutter UI组件插件xapptor_ui的使用

<xapptor_ui>插件提供了多种实用的UI组件，用于快速构建美观且功能丰富的应用界面。下面是使用该插件的一些示例。

1 - 添加依赖

首先，在你的pubspec.yaml文件中添加xapptor_ui插件的依赖：

dependencies:
    xapptor_ui: ^0.0.3

然后在命令行中运行以下命令来安装依赖：

flutter pub get

2 - 使用示例

接下来我们将通过一些实际的示例代码来展示如何使用这些组件。

Privacy Policy
PrivacyPolicy(
    base_url: "https://www.yourdomain.com",
    use_topbar: false,
    topbar_color: Colors.blue,
);
QR Scanner
QRScanner(
    descriptive_text: "Scan the QR code\nof the Machine",
    update_qr_value: update_qr_value_function,
    border_color: Colors.pink,
    border_radius: 4,
    border_length: 40,
    border_width: 8,
    cut_out_size: MediaQuery.of(context).size.width * 0.65,
    button_linear_gradient: LinearGradient(
      colors: [
        Colors.blue.withOpacity(0.4),
        Colors.green.withOpacity(0.4),
      ],
    ),
    permission_message: "You must give permission to the camera to capture QR codes",
    permission_message_no: "Cancel",
    permission_message_yes: "Accept",
    enter_code_text: "Enter your code",
    validate_button_text: "Validate",
    fail_message: "You must enter a code",
    textfield_color: Colors.green,
    login_button_text: "Log in",
    show_login_button: true,
);
Unknow Screen
UnknownScreen(
    logo_path: "assets/images/your_logo.png",
);
Resume
Resume(
    resume: Resume(
        image_src: "assets/images/resume_photo.png",
        name: "Javier Jesus Garcia Contreras",
        job_title: "Software Developer",
        email: "info@xapptor.com",
        url: "https://xapptor.com",
        skills: [
            ResumeSkill(
            name: "Experience: 5 years",
            percentage: 0.5,
            color: color_turquoise,
            ),
            ResumeSkill(
            name: "Communication",
            percentage: 0.8,
            color: color_purple,
            ),
            ResumeSkill(
            name: "Cognitive Flexibility",
            percentage: 0.8,
            color: color_magenta,
            ),
            ResumeSkill(
            name: "Negotiation",
            percentage: 0.7,
            color: Colors.amberAccent,
            ),
            ResumeSkill(
            name: "Health",
            percentage: 0.9,
            color: Colors.red,
            ),
            ResumeSkill(
            name: "Mana",
            percentage: 0.8,
            color: Colors.blueAccent,
            ),
        ],
        sections: [
            ResumeSection(
            icon: Icons.badge,
            code_point: 0xea67,
            title: "Profile",
            description:
                "I am a software developer passionate about Apps and artificial intelligence, I have participated in 3 projects implementing cognitive services of Microsoft Azure. I love working with Flutter and Firebase for the analysis, design and implementation of libraries to speed up the development of multi platform applications.",
            ),
            ResumeSection(
            icon: Icons.dvr_rounded,
            code_point: 0xe1b2,
            title: "Employment History",
            subtitle: "Software Developer at Keydok, Mexico City",
            begin: DateTime(2019, 10),
            end: DateTime.now(),
            description:
                "Design, development and implementation of software in the mobile applications area (Android and IOS). Use of native and cross-platform frameworks such as IOS Native, Kotlin Native, Flutter and Kotlin Multi-platform. Implementing development methodologies like Safe, Agile and Scrum.",
            ),
            // 其他简历部分...
        ],
        icon_color: color_turquoise,
    ),
    visible: true,
);
WebView
Webview(
    id: Uuid().v4(),
    src: image_src,
);
App Version Container
AppVersionContainer(
    text_color: Colors.blue,
    background_color: Colors.white,
);
Background Image with Gradient Color
BackgroundImageWithGradientColor(
    height: height,
    box_fit: BoxFit.cover,
    image_path: null,
    linear_gradient: LinearGradient(
        begin: FractionalOffset.centerLeft,
        end: FractionalOffset.centerRight,
        colors: widget.linear_gradient_colors,
        stops: [0.0, 1.0],
    ),
    child: Container(
        ...
    ),
);
BottomBar Container
BottomBarContainer(
    current_page_callback: update_current_page_function,
    initial_page: 0,
    bottom_bar_buttons: [
        BottomBarButton(
            icon: Icons.microwave_outlined,
            text: "Machines",
            foreground_color: Colors.white,
            background_color: color_lum_green,
            page: Container(
                color: Colors.white,
                child: vending_machines_widgets.length == 0
                    ? Center(
                        child: Text(
                            "You don't have any vending machine",
                            style:
                                Theme.of(context).textTheme.subtitle2,
                            ),
                    )
                    : SingleChildScrollView(
                        child: Column(
                            children: vending_machines_widgets,
                    ),
                ),
            ),
        ),
        BottomBarButton(
            icon: Icons.insights,
            text: "Analytics",
            foreground_color: Colors.white,
            background_color: Colors.blue,
            page: AdminAnalytics(
                text_color: Colors.blue,
                icon_color: Colors.green,
            ),
        ),
    ],
);
Card Holder
CardHolder(
    image_src: "assets/images/courses.jpg",
    title: title,
    subtitle: subtitle,
    background_image_alignment: Alignment.center,
    icon: null,
    icon_background_color: null,
    on_pressed: () {
        open_screen("home/courses");
    },
    elevation: elevation,
    border_radius: border_radius,
    is_focused: true,
);
Characteristics Container Item
CharacteristicsContainerItem(
    title: title,
    description: description,
    icon: Icons.hourglass_empty,
    color: Theme.of(context).primaryColor,
    title_color: Colors.white,
    subtitle_color: Colors.white,
    icon_color: Colors.orange.shade300,
    side_icon: false,
    large_description: false,
    align_to_left_description: false,
);
Characteristics Container
CharacteristicsContainer(
    texts: text_list,
);
Check Permission
check_permission(
    context: context,
    message: permission_message,
    message_no: permission_message_no,
    message_yes: permission_message_yes,
    permission_type: Permission.camera,
);

encourage_give_permission(
    context: context,
    message: message,
    message_no: message_no,
    message_yes: message_yes,
);
Coming Soon Container
ComingSoonContainer(
    text: "Coming Soon",
    enable_cover: true,
);
Contact Us Container
ContactUsContainer(
    texts: text_list_contact_us,
    landing_class: this,
    icon_color: Colors.blue,
    container_background_image:
        "assets/images/background_building.jpg",
    facebook_url: url_facebook,
    facebook_url_fallback: url_facebook_fallback,
    youtube_url: url_youtube,
    instagram_url: url_instagram,
    twitter_url: url_twitter,
    email: "email@yourdomain.com",
    feedback_message: "✉️ Message sent! 👍",
    card_background_image: "",
    container_background_color: Colors.white,
    card_background_color: Colors.white,
    linear_gradient_colors: [
        Colors.black.withOpacity(0.6),
        Colors.black.withOpacity(0.6),
    ],
    border_radius: 10,
);
Crop Widget
CropWidget(
    child: Image.asset(
        "assets/images/logo.png",
        color: Color.blue.withOpacity(0.40),
        fit: BoxFit.cover,
    ),
    general_alignment: Alignment.bottomLeft,
    vertical_alignment: Alignment.topCenter,
    horizontal_alignment: Alignment.centerRight,
    height_factor: 0.8,
    width_factor: 0.75,
);
Custom Card
CustomCard(
    on_pressed: () async {
        ...
    },
    border_radius: 1000,
    splash_color: Colors.blue.withOpacity(0.3),
    child: Center(
        child: Text(
            your_text,
            style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
            ),
        ),
    ),
);
Description Card
description_card(
    description_card: DescriptionCard(
        image_src: "assets/images/module_auth.png",
        title: "Xapptor Auth",
        description:
            "Get easy screen integration to manage your login, registration and password recovery processes.",
        url: "https://github.com/Xapptor/xapptor_auth",
        url_title: "Github Repo",
        text_color: color_turquoise,
        direction: Axis.horizontal,
        reversed: false,
        current_offset: _scroll_position,
        visible_offset: screen_height + ((screen_height * 0.7) * 2),
    ),
    context: context,
);
Download Apps Container
DownloadAppsContainer(
    texts: text_list,
    title_color: Colors.black,
    subtitle_color: Colors.grey,
    image_1: 'assets/images/image_1.jpg',
    image_2: 'assets/images/image_2.jpg',
    android_url: apk_url,
    ios_url: ios_url,
    background_image: "",
    button_background_color: [
        Colors.cyan,
        Colors.blue,
    ],
);
Expandable FAB
floatingActionButton: ExpandableFab(
    distance: 112.0,
    background_color: Colors.white,
    children: [
        ActionButton(
            on_pressed: () {
                ...
            },
            icon: Icon(
                FontAwesome.twitter,
                color: Colors.white,
                size: 16,
            ),
            icon_color: color_twitter,
        ),
        ActionButton(
            on_pressed: () {
                ...
            },
            icon: Icon(
                FontAwesome.youtube,
                color: Colors.white,
                size: 16,
            ),
            icon_color: color_youtube,
        ),
        ActionButton(
            on_pressed: () {
                ...
            },
            icon: Icon(
                FontAwesome.instagram,
                color: Colors.white,
                size: 16,
            ),
            icon_color: color_instagram,
        ),
        ActionButton(
            on_pressed: () {
                ...
            },
            icon: Icon(
                FontAwesome.facebook,
                color: Colors.white,
                size: 16,
            ),
            icon_color: color_facebook,
        ),
    ],
),
Introduction Container
IntroductionContainer(
    texts: text_list_introduction,
    text_color: Colors.white,
    background_image: "assets/images/introduction_container.jpg",
    logo_image: "assets/images/logo.png",
    scroll_icon: Icons.keyboard_arrow_down,
    scroll_icon_color: Colors.orangeAccent,
    height: MediaQuery.of(context).size.height,
);
Show Custom Dialog
show_custom_dialog(
    context: context,
    title: "Failed",
    message: "The passwords do not match",
    button_text: "Close",
);
Switch Button
switch_button(
    text: "Enabled",
    value: dispenser_enabled,
    enabled: enable_dispenser_edit,
    active_track_color: main_color,
    active_color: Colors.lightGreen,
    inactive_color: Colors.red,
    background_color: Colors.blue,
    callback: switch_button_callback_function,
    border_radius: MediaQuery.of(context).size.width,
);
Topbar
appBar: TopBar(
    background_color: Colors.blue,
    has_back_button: false,
    actions: [
        Container(
            width: 150,
            margin: EdgeInsets.only(right: 20),
            child: widget.language_picker
                ? LanguagePicker(
                    translation_stream_list: translation_stream_list,
                    language_picker_items_text_color:
                        widget.language_picker_items_text_color,
                )
                : Container(),
        ),
    ],
    custom_leading: null,
    logo_path: "assets/images/logo.png",
),
URL Text
UrlText(
    text: "myemail@domain.com",
    url: "mailto:myemail@domain.com",
);
Video Visualizer
WebVideoVisualizer(
    src: video_url,
);
Why Us Container
WhyUsContainer(
    texts: text_list_why_us,
    background_color: Colors.white,
    characteristic_icon_1: Icons.shutter_speed,
    characteristic_icon_2: Icons.message,
    characteristic_icon_3: Icons.compare,
    characteristic_icon_color_1: Colors.orangeAccent,
    characteristic_icon_color_2: Colors.lightBlueAccent,
    characteristic_icon_color_3: Colors.redAccent,
    title_color: Colors.black,
    subtitle_color: Colors.grey,
    background_image: '',
),
Widgets Carousel
List<Widget> carousel_items = [
    CardHolder(
        image_src: "assets/images/logo_abeinstitute.jpg",
        image_fit: BoxFit.fitWidth,
        title: "Abeinstitute",
        subtitle: "",
        background_image_alignment: Alignment.center,
        icon: null,
        icon_background_color: null,
        on_pressed: () {
        launch("https://www.abeinstitute.com");
        },
        elevation: elevation,
        border_radius: border_radius,
        is_focused: is_focused_1,
    ),
    CardHolder(
        image_src: "assets/images/logo_lum.jpg",
        image_fit: BoxFit.fitWidth,
        title: "Lum",
        subtitle: "",
        background_image_alignment: Alignment.center,
        icon: null,
        icon_background_color: null,
        on_pressed: () {
        launch("https://apps.apple.com/mx/app/lum/id1582217429?l=en");
        },
        elevation: elevation,
        border_radius: border_radius,
        is_focused: is_focused_2,
    ),
    CardHolder(
        image_src: "assets/images/logo_mobilecard.jpeg",
        image_fit: BoxFit.fitWidth,
        title: "Mobilecard",
        subtitle: "",
        background_image_alignment: Alignment.center,
        icon: null,
        icon_background_color: null,
        on_pressed: () {
        launch("https://apps.apple.com/mx/app/mo/id1530448416?l=en");
        },
        elevation: elevation,
        border_radius: border_radius,
        is_focused: is_focused_3,
    ),
    CardHolder(
        image_src: "assets/images/logo_claro_pay.png",
        image_fit: BoxFit.fitWidth,
        title: "Claro Pay",
        subtitle: "",
        background_image_alignment: Alignment.center,
        icon: null,
        icon_background_color: null,
        on_pressed: () {
        launch("https://apps.apple.com/mx/app/claro-pay/id1502765283?l=en");
        },
        elevation: elevation,
        border_radius: border_radius,
        is_focused: is_focused_4,
    ),
];

WidgetsCarousel(
    update_current_page: (current_page) {
        first_current_page = current_page;
        setState(() {});
    },
    auto_scroll: true,
    dot_colors_active: [
        color_purple,
        color_purple,
        color_purple,
        color_purple,
    ],
    dot_color_inactive: color_turquoise,
    children: carousel_items,
);

更多关于Flutter UI组件插件xapptor_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件插件xapptor_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


xapptor_ui 是一个 Flutter UI 组件库，旨在帮助开发者快速构建美观且功能丰富的用户界面。它提供了一系列预构建的组件和工具，可以简化开发流程并提高代码的可维护性。以下是如何使用 xapptor_ui 的一些基本步骤和示例。

1. 安装依赖

首先，你需要在 pubspec.yaml 文件中添加 xapptor_ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  xapptor_ui: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入库

在你的 Dart 文件中导入 xapptor_ui：

import 'package:xapptor_ui/xapptor_ui.dart';

3. 使用组件

xapptor_ui 提供了多种常用的 UI 组件，以下是一些常见的示例：

按钮组件

XApptorButton(
  text: "点击我",
  onPressed: () {
    print("按钮被点击了!");
  },
  backgroundColor: Colors.blue,
  textColor: Colors.white,
);

输入框组件

XApptorTextField(
  hintText: "请输入内容",
  onChanged: (value) {
    print("输入的内容: $value");
  },
);

卡片组件

XApptorCard(
  child: Column(
    children: [
      Text("这是一个卡片"),
      Text("卡片内容可以包含多种组件"),
    ],
  ),
);

对话框组件

XApptorDialog(
  title: "提示",
  content: "这是一个简单的对话框",
  actions: [
    TextButton(
      onPressed: () {
        print("确定");
        Navigator.of(context).pop();
      },
      child: Text("确定"),
    ),
  ],
);

4. 自定义主题

xapptor_ui 还允许你自定义应用的主题，以确保 UI 组件与你的应用设计风格一致。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
    fontFamily: 'Roboto',
  ),
  home: MyHomePage(),
);

5. 响应式设计

xapptor_ui 提供了响应式布局工具，帮助你在不同屏幕尺寸上保持一致的 UI 表现。

XApptorResponsive(
  mobile: Container(
    child: Text("移动端视图"),
  ),
  tablet: Container(
    child: Text("平板视图"),
  ),
  desktop: Container(
    child: Text("桌面视图"),
  ),
);

6. 动画和过渡效果

xapptor_ui 还可以帮助你轻松地添加动画和过渡效果。

XApptorAnimatedContainer(
  duration: Duration(seconds: 1),
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text("动画容器"),
  ),
);
回到顶部