Flutter自定义组件库插件flutter_widgetz的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter自定义组件库插件flutter_widgetz的使用

Flutter Widgetz 是一个包含多种常用组件的自定义组件库，适用于各种项目。本文将介绍如何使用 flutter_widgetz 插件，并提供完整的示例代码。

安装

在使用 flutter_widgetz 之前，首先需要将其添加到项目的依赖中。打开 pubspec.yaml 文件，并添加以下内容：

dependencies:
  flutter_widgetz: ^latest_version

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

flutter pub get

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_widgetz 中的各种组件。这个示例应用包括了多个页面，每个页面展示了一个特定的组件。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_themez/flutter_themez.dart';
import 'package:flutter_widgetz/flutter_widgetz.dart';
import 'pages/accordion_page.dart';
import 'pages/alert_page.dart';
import 'pages/auth_button_page.dart';
import 'pages/avatar_page.dart';
import 'pages/badge_page.dart';
import 'pages/button_page.dart';
import 'pages/carousel_page.dart';
import 'pages/checkbox_page.dart';
import 'pages/color_picker_page.dart';
import 'pages/countdown_page.dart';
import 'pages/counter_field_page.dart';
import 'pages/date_field_page.dart';
import 'pages/dialogs_page.dart';
import 'pages/directional_pad_page.dart';
import 'pages/divider_page.dart';
import 'pages/dropdown_field_page.dart';
import 'pages/duration_picker_page.dart';
import 'pages/feedback_page.dart';
import 'pages/grouped_list_view_page.dart';
import 'pages/image_page.dart';
import 'pages/link_page.dart';
import 'pages/list_view_page.dart';
import 'pages/marquee_page.dart';
import 'pages/navigation_rail_page.dart';
import 'pages/orienatation_page.dart';
import 'pages/picklist_page.dart';
import 'pages/placeholder_page.dart';
import 'pages/poll_page.dart';
import 'pages/popup_menu_page.dart';
import 'pages/progress_indicator_page.dart';
import 'pages/radio_page.dart';
import 'pages/rating_page.dart';
import 'pages/scaffold_page.dart';
import 'pages/search_bar_page.dart';
import 'pages/settings_page.dart';
import 'pages/shimmer_page.dart';
import 'pages/slider_page.dart';
import 'pages/sliver_grid_page.dart';
import 'pages/sliver_list_page.dart';
import 'pages/text_field_page.dart';
import 'pages/text_page.dart';
import 'pages/time_field_page.dart';
import 'pages/welcome_page.dart';

void main() {
  runApp(const Main());
}

class Main extends StatefulWidget {
  const Main({super.key});

  @override
  State<Main> createState() => MainState();
}

class MainState extends State<Main> {
  late final PageController _controller;
  late Page _currentPage;
  late bool _isDark;
  late bool _showMaterialGrid;
  late FlutterThemez _theme;

  @override
  void initState() {
    super.initState();
    _controller = PageController();
    _currentPage = _pages[0];
    _isDark = false;
    _showMaterialGrid = false;
    _theme = FlutterThemez();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      debugShowMaterialGrid: _showMaterialGrid,
      title: 'Flutter Widgetz Example',
      restorationScopeId: 'root',
      home: CustomScaffold(
        dynamicFab: true,
        floatingActionButton: ExpandableFab(
          children: <Widget>[
            const _TimeDilationButton(),
            ExpandedActionButton(
              icon: const Icon(Icons.grid_3x3),
              onPressed: _onShowMaterialGrid,
            ),
            ExpandedActionButton(
              icon: Icon(_isDark ? Icons.dark_mode : Icons.sunny),
              onPressed: _onDarkModeChanged,
            ),
          ],
        ),
        appBar: CustomAppBar.subtitled(
          title: const Text('Flutter Widgetz'),
          subtitle: Text(_currentPage.title),
        ),
        drawer: CustomDrawer.builder(
          header: const Text('Flutter Widgetz!'),
          itemCount: _pages.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: Icon(_pages[index].icon),
              title: Text(_pages[index].title),
              onTap: () => _onDrawerChanged(context, index),
            );
          },
        ),
        bottomNavigationBar: const CustomBottomNavigationBar(
          onTap: print,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: 'Home',
              icon: Icon(Icons.home_outlined),
              activeIcon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: 'Settings',
              icon: Icon(Icons.settings_outlined),
              activeIcon: Icon(Icons.settings),
            ),
          ],
        ),
        body: Scaffold(
          body: PageView.builder(
            clipBehavior: Clip.none,
            controller: _controller,
            onPageChanged: _onPageChanged,
            itemCount: _pages.length,
            itemBuilder: (BuildContext context, int index) {
              return _pages[index].page;
            },
          ),
        ),
      ),
      theme: _isDark ? _theme.dark() : _theme.light(),
    );
  }

  void _onShowMaterialGrid() {
    setState(() {
      _showMaterialGrid = !_showMaterialGrid;
    });
  }

  void _onDarkModeChanged() {
    setState(() {
      _isDark = !_isDark;
    });
  }

  void _onDrawerChanged(BuildContext context, int index) {
    _controller.jumpToPage(index);
    Navigator.pop(context);
  }

  void _onPageChanged(int index) {
    setState(() {
      _currentPage = _pages[index];
    });
  }
}

class _TimeDilationButton extends StatelessWidget {
  const _TimeDilationButton();

  @override
  Widget build(BuildContext context) {
    return ExpandedActionButton(
      icon: const Icon(Icons.timelapse),
      onPressed: () => showDialog(
        context: context,
        builder: (_) => SimpleDialog(
          title: const Text('Time Dilation'),
          children: <Widget>[
            CustomSlider(
              min: 1,
              max: 10,
              divisions: 9,
              value: timeDilation,
              onChanged: (num value) => timeDilation = value.toDouble(),
            ),
          ],
        ),
      ),
    );
  }
}

class Page {
  const Page(
    this.icon,
    this.page,
    this.title,
  );

  final IconData icon;
  final Widget page;
  final String title;
}

const List<Page> _pages = <Page>[
  Page(Icons.account_tree, AccordionPage(), 'Accordions'),
  Page(Icons.notifications, AlertPage(), 'Alerts'),
  Page(Icons.login, AuthButtonPage(), 'Auth Buttons'),
  Page(Icons.person, AvatarPage(), 'Avatars'),
  Page(Icons.badge, BadgePage(), 'Badges'),
  Page(Icons.gamepad, ButtonPage(), 'Buttons'),
  Page(Icons.roundabout_left, CarouselPage(), 'Carousel'),
  Page(Icons.check_box, CheckboxPage(), 'Checkboxes'),
  Page(Icons.color_lens, ColorPickerPage(), 'Color Picker'),
  Page(Icons.downhill_skiing, CountdownPage(), 'Countdown'),
  Page(Icons.numbers, CounterPage(), 'Counter Field'),
  Page(Icons.date_range, DateFieldPage(), 'Date Field'),
  Page(Icons.dialpad_outlined, DialogsPage(), 'Dialogs'),
  Page(Icons.directions, DirectionalPadPage(), 'Directional Pad'),
  Page(Icons.space_bar, DividerPage(), 'Dividers'),
  Page(Icons.arrow_drop_down, DropdownFieldPage(), 'Dropdown Field'),
  Page(Icons.timelapse, DurationFieldPage(), 'Duration Picker'),
  Page(Icons.feedback, FeedbackPage(), 'Feedback'),
  Page(Icons.group, GroupedListViewPage(), 'Grouped List'),
  Page(Icons.image, ImagePage(), 'Images'),
  Page(Icons.link, LinkPage(), 'Links'),
  Page(Icons.list, ListViewPage(), 'List View'),
  Page(Icons.margin, MarqueePage(), 'Marquee'),
  Page(Icons.navigation, NavigationRailPage(), 'Navigation Rail'),
  Page(Icons.landscape, OrientationPage(), 'Orientation'),
  Page(Icons.percent, ProgressIndicatorPage(), 'Progress'),
  Page(Icons.price_check, PicklistPage(), 'Picklists'),
  Page(Icons.business, PlaceholderPage(), 'Placeholders'),
  Page(Icons.poll, PollPage(), 'Polls'),
  Page(Icons.phonelink_setup_sharp, PopupMenuPage(), 'Popup Menu'),
  Page(Icons.radio, RadioPage(), 'Radios'),
  Page(Icons.settings, SettingsPage(), 'Settings'),
  Page(Icons.star, RatingPage(), 'Ratings'),
  Page(Icons.scale, ScaffoldPage(), 'Scaffold'),
  Page(Icons.search, SearchBarPage(), 'Search Bar'),
  Page(Icons.shield, ShimmerPage(), 'Shimmer'),
  Page(Icons.tune, SliderPage(), 'Sliders'),
  Page(Icons.grid_4x4, SliverGridPage(), 'Sliver Grid'),
  Page(Icons.list, SliverListPage(), 'Sliver List'),
  Page(Icons.text_format, TextPage(), 'Text'),
  Page(Icons.text_fields, TextFieldPage(), 'Text Field'),
  Page(Icons.timelapse, TimeFieldPage(), 'Time Field'),
  Page(Icons.web_outlined, WelcomePage(), 'Welcome'),
];

页面示例

以下是几个页面的示例代码，展示了如何使用 flutter_widgetz 中的部分组件。

AccordionPage

import 'package:flutter/material.dart';
import 'package:flutter_widgetz/flutter_widgetz.dart';

class AccordionPage extends StatelessWidget {
  const AccordionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Accordion Example')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Accordion(
              title: const Text('Section 1'),
              content: const Text('Content for section 1'),
            ),
            Accordion(
              title: const Text('Section 2'),
              content: const Text('Content for section 2'),
            ),
          ],
        ),
      ),
    );
  }
}

ButtonPage

import 'package:flutter/material.dart';
import 'package:flutter_widgetz/flutter_widgetz.dart';

class ButtonPage extends StatelessWidget {
  const ButtonPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Button Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text('Elevated Button'),
            ),
            OutlinedButton(
              onPressed: () {},
              child: const Text('Outlined Button'),
            ),
            TextButton(
              onPressed: () {},
              child: const Text('Text Button'),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述示例代码，您可以快速上手并使用 flutter_widgetz 提供的各种组件。更多详细信息和文档可以参考 官方文档。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用自定义组件库插件 flutter_widgetz 的一个示例。假设你已经有一个Flutter项目，并且希望在这个项目中使用 flutter_widgetz 提供的自定义组件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_widgetz: ^最新版本号  # 替换为实际发布的最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入库

在你希望使用 flutter_widgetz 组件的 Dart 文件中，导入该库。

import 'package:flutter_widgetz/flutter_widgetz.dart';

3. 使用自定义组件

假设 flutter_widgetz 提供了一个名为 CustomButton 的自定义按钮组件，以下是如何在你的 Flutter 应用中使用它的示例。

import 'package:flutter/material.dart';
import 'package:flutter_widgetz/flutter_widgetz.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widgetz Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Widgetz Demo'),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {
            // 按钮点击时的回调
            print('CustomButton clicked!');
          },
          buttonText: 'Click Me',
          // 假设CustomButton还有其他属性，例如颜色、大小等，可以在这里配置
          // color: Colors.red,
          // fontSize: 20,
        ),
      ),
    );
  }
}

4. 自定义组件的假设实现（仅供理解）

注意：实际的 flutter_widgetz 库中的组件实现可能会有所不同。以下是一个假设的 CustomButton 实现，仅用于帮助你理解如何定义和使用自定义组件。

// 假设这是flutter_widgetz库中的CustomButton实现
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String buttonText;
  // 你可以根据需要添加更多的属性
  // final Color color;
  // final double fontSize;

  const CustomButton({
    Key? key,
    required this.onPressed,
    required this.buttonText,
    // , this.color = Colors.blue,
    // this.fontSize = 16,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(
        buttonText,
        // 你可以根据需要应用样式
        // style: TextStyle(color: color, fontSize: fontSize),
      ),
      // 你可以根据需要应用按钮样式
      // style: ButtonStyle(
      //   backgroundColor: MaterialStateProperty.all(color),
      // ),
    );
  }
}

注意事项

  1. 实际文档：请查阅 flutter_widgetz 的官方文档或 GitHub 仓库以获取实际可用的组件列表及其属性。
  2. 版本兼容性：确保你使用的 flutter_widgetz 版本与你的 Flutter SDK 版本兼容。
  3. 样式和主题：你可以通过主题和样式来定制 flutter_widgetz 提供的组件，以符合你的应用设计需求。

通过上述步骤，你应该能够在你的 Flutter 项目中成功集成并使用 flutter_widgetz 提供的自定义组件。

回到顶部