Flutter热重启与状态恢复插件phoenix_widgets的使用

Phoenix Widgets

Phoenix Widgets 是一组用于创建各种界面组件的小部件集合。

开始使用

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  phoenix_widgets: "^latestVersion"

然后导入该库：

import 'package:phoenix_widgets/phoenix_widgets.dart';

PhoenixCard

PhoenixCard 是一个可以创建卡片的小部件。

使用示例

PhoenixCard(
  title: Text(
    "Title with Image",
    style: Theme.of(context).textTheme.headline6,
  ),
  description: Text(
    "Description",
    style: Theme.of(context).textTheme.bodyText2,
  ),
  footer: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      const CircleAvatar(backgroundColor: Colors.red),
      const SizedBox(width: 8),
      Text(
        "Footer",
        style: Theme.of(context).textTheme.headline6,
      )
    ],
  ),
  image: Image.network(
    "https://images.contentstack.io/v3/assets/blt2a130c768c36b9df/blt5f384c7eb51e7cff/5f7d972ddf178b0ea98488e1/banner_sadaqah.jpg?auto=webp",
    fit: BoxFit.cover,
  ),
  onTap: () {},
),

可用参数

PhoenixNavigationCard

PhoenixNavigationCard 是一个包含导航按钮的卡片小部件。

使用示例

PhoenixNavigationCard(
  isVisible: false,
  icon: SvgPicture.asset(
    "assets/education.svg",
    width: 46,
    height: 46,
  ),
  title: Text(
    "Title",
    style: Theme.of(context).textTheme.headline6,
  ),
  description: Text(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elite!",
    style: Theme.of(context).textTheme.bodyText2,
  ),
  callback: () {},
  navigationText: Text(
    "Click Here",
    style: Theme.of(context).textTheme.bodyText2,
  ),
),

可用参数

PhoenixBottomMenu

PhoenixBottomMenu 是一个底部导航栏的小部件。

使用示例

PhoenixBottomMenuUHF(
  selectedIndex: selectedIndex,
  navBarItems: [
    NavBarItem(
      name: "Home",
      image: SvgPicture.asset('assets/tab/home_default.svg'),
      selectedImage: SvgPicture.asset('assets/tab/home_selected.svg'),
    ),
    NavBarItem(
      name: "Feed",
      image: SvgPicture.asset('assets/tab/feed_default.svg'),
      selectedImage: SvgPicture.asset('assets/tab/feed_selected.svg'),
    ),
    NavBarItem(
      name: "Community",
      image: SvgPicture.asset('assets/tab/community_default.svg'),
      selectedImage: SvgPicture.asset('assets/tab/community_selected.svg'),
    ),
    NavBarItem(
      name: "Account",
      image: SvgPicture.asset('assets/tab/account_default.svg'),
      selectedImage: SvgPicture.asset('assets/tab/account_selected.svg'),
    ),
  ],
  selectedTabColor: Colors.red, ///可选
  unselectedTabColor: Colors.black54, ///可选
  onTabChange: (index) {
    setState(() {
      selectedIndex = index;
      _tabController!.jumpToPage(index);
    });
  },
)

可用参数

NavBarItem 的可用参数

PhoenixButton

PhoenixButton 是一个创建按钮的小部件。

使用示例

PhoenixButton(
  content: const Text(
    "Normal Button",
  ),
  margin: const EdgeInsets.only(
    left: 16,
    top: 16,
    right: 16,
  ),
  buttonElevation: 2,
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Normal Button Clicked"),
      ),
    );
  },
  radius: 10,
),

可用参数

PhoenixProductTiles

PhoenixProductTiles 是一个创建产品图标的列表小部件。

使用示例

PhoenixProductTiles(
  onTap: (index) {},
  items: [
    PhoenixProductItem(
      "Tile 1",
      Image.asset(
        "assets/tile_1.png",
        width: 45,
        height: 45,
      )),
    PhoenixProductItem(
      "Tile 2",
      SvgPicture.asset(
        "assets/tile_2.svg",
        width: 45,
        height: 45,
      ),
      label: "Coming Soon"
    )
  ]
)

// 在非滑动父容器中使用
PhoenixProductTiles.box(
  onTap: (index) {},
  items: [
    PhoenixProductItem(
      "Tile 1",
      Image.asset(
        "assets/tile_1.png",
        width: 45,
        height: 45,
      )),
    PhoenixProductItem(
      "Tile 2",
      SvgPicture.asset(
        "assets/tile_2.svg",
        width: 45,
        height: 45,
      ),
      label: "Coming Soon"
    )
  ]
)

可用参数

PhoenixProductTiles

PhoenixProductItem

PhoenixGenericPopUp

PhoenixGenericPopUp 是一个显示带两个或一个按钮的弹窗函数。

使用示例

phoenixGenericPopUp(
  /// 必填
  context: context,
  popUpTitleWidget: Text(
    'Pop Up Two Button Title',
  ),
  popUpContentWidget: Text(
    "This is Pop Up One Button Message, Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  ),

  /// 可选
  ensureWidget: Text(
    "Confirm",
    style: TextStyle(
      fontWeight: FontWeight.bold,
    ),
  ),
  cancelWidget: Text(
    "Cancel",
    style: TextStyle(
      color: Colors.red,
    ),
  ),
  // 如果 type != 1 弹窗不会因为点击确认按钮而消失
  type: 1,
  dismissOnOutsideTouch: false,
  ensureCallback: () {
    showSnackBar("Confirm Button Clicked");
  },
  cancelCallback: () {
    showSnackBar("Cancel Button Clicked");
  },
);

可用参数

PhoenixPopUp

PhoenixPopUp 是一个显示带两个或一个按钮的弹窗函数。

使用示例

phoenixPopUp(
  context: context,
  title: 'Pop Up Two Button Title',
  description:
  "This is Pop Up One Button Message, Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  primaryButtonLabel: 'Confirm',
  secondayButtonLabel: 'Cancel',
  type: 1,
  barrierDismissible: true,
  ensureCallback: () {
    showSnackBar("Confirm Button Clicked");
  },
  cancelCallback: () {
    showSnackBar("Cancel Button Clicked");
  },
);

可用参数

PhoenixWebview

PhoenixWebview 是一个创建网页视图的小部件。

使用示例

PhoenixWebview(url: "https://flutter.dev/", title: "Flutter Dev");

可用参数

PhoenixBackButton

PhoenixBackButton 是一个创建返回按钮的小部件。

使用示例

PhoenixBackButton();

可用参数

PhoenixTitle

PhoenixTitle 是一个创建标题的小部件。

使用示例

PhoenixTitle(title: "Phoenix Title");

可用参数

PhoenixEmptyPage

PhoenixEmptyPage 是一个创建空页面的小部件。

使用示例

PhoenixEmptyPage(
  title: "No Data",
  pageImage: Image.asset(
    "assets/illustration.png",
  ),
  textStyle: const TextStyle(
    fontSize: 16.0,
    color: Color(0xff212124),
  ),
)

可用参数

PhoenixExpandableContentBlock

PhoenixExpandableContentBlock 是一个创建可展开内容块的小部件。文本内容中的 URL 可以点击，并且可以通过长按复制文本内容。

使用示例

PhoenixExpandableContentBlock(
  text: "Flutter is Google’s portable UI toolkit. Visit https://flutter.dev to learn more.",
  style: Theme.of(context).textTheme.bodyText2,
  urls: [Url("https://flutter.dev", [47, 66])],
  shortenButtonLabel: "[See less]",
  expandButtonLabel: "[See more]"
)

可用参数

PhoenixBottomSheet

PhoenixBottomSheet 是一个显示底部弹出框的小部件。

使用示例

// 包装在 StatefulWidget 中
final PhoenixBottomSheet _bottomSheetHowItWorks = PhoenixBottomSheet();

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: const Text('Phoenix Bottom Sheet Sample'),
    ),
    body: Center(
      child: ElevatedButton(
        child: const Text("Show All Products"),
        onPressed: () {
          _bottomSheetHowItWorks(
            context,
            title: 'Title of bottom Sheet',
            children: [
              for (final item in _items)
                Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 20,
                  ),
                  child: Row(
                    children: [
                      item.icon,
                      const SizedBox(height: 16),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              item.title,
                              style: const TextStyle(
                                color: Color(0xFF212124),
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            Text(
                              'Description ${item.title}',
                              style: const TextStyle(
                                color: Color(0xFF212124),
                                fontSize: 14,
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                )
            ],
          );
        },
      ),
    ),
  );
}

// 示例数据
final List<PhoenixProductItem> _items = [
  PhoenixProductItem(
    "Tile 1",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 2",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 3",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 4",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 5",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 6",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 7",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    ),
    label: "Coming Soon"),
  PhoenixProductItem(
    "Tile 8",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    ),
    label: "Coming Soon"),
];

可用参数

PhoenixBottomSheetTile

PhoenixBottomSheetTile 是一个显示底部弹出框的小部件，其中包含图块。

使用示例

// 包装在 StatefulWidget 中
final PhoenixBottomSheetTile _bottomSheetHowItWorks = PhoenixBottomSheetTile();

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: const Text('Phoenix Bottom Sheet Tile Sample'),
    ),
    body: Center(
      child: ElevatedButton(
        child: const Text("Show All Products"),
        onPressed: () {
          _bottomSheetHowItWorks(
            context,
            spacing: const EdgeInsets.only(bottom: 16.0),
            padding: const EdgeInsets.only(
              top: 16,
              bottom: 58,
            ),
            title: 'Title of bottom sheet',
            style: const TextStyle(
              color: Color(0xFF212124),
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
            child: CustomScrollView(
              shrinkWrap: true,
              slivers: [
                PhoenixProductTiles(
                  onTap: (index) {},
                  items: _items,
                )
              ],
            ),
          );
        },
      ),
    ),
  );
}

// 示例数据
final List<PhoenixProductItem> _items = [
  PhoenixProductItem(
    "Tile 1",
    SvgPicture.asset(
      "assets/education.svg",
      width: 46,
      height: 46,
    )),
  PhoenixProductItem(
    "Tile 2",
    SvgPicture.asset(
      "assets/education.svg",
      width: 46,
      height: 46,
    )),
  PhoenixProductItem(
    "Tile 3",
    SvgPicture.asset(
      "assets/education.svg",
      width: 46,
      height: 46,
    ),
    label: "Coming Soon"),
  PhoenixProductItem(
    "Tile 4",
    SvgPicture.asset(
      "assets/education.svg",
      width: 46,
      height: 46,
    ),
    label: "Coming Soon"),
  PhoenixProductItem(
    "Tile 5",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 6",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    )),
  PhoenixProductItem(
    "Tile 7",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    ),
    label: "Coming Soon"),
  PhoenixProductItem(
    "Tile 8",
    Image.asset(
      "assets/tab_home.png",
      width: 45,
      height: 45,
    ),
    label: "Coming Soon"),
];

可用参数

PhoenixShimmer

PhoenixShimmer 是一个显示加载效果的小部件。

使用示例

ShimmerWidget.rectangular(
  height: 10,
  width: 100,
  baseColor: Colors.red,
)

ShimmerWidget.circular(
  height: 100,
  width: 100,
  baseColor: Colors.red,
)

可用参数

PhoenixBanner

PhoenixBanner 是一个显示轮播广告的小部件。

使用示例

PhoenixBanner(
  listSlider: [
    'https://picsum.photos/820/360',
    'https://picsum.photos/820/360',
    'https://picsum.photos/820/360',
    'https://picsum.photos/820/360'
  ],
  onEvent: (GestureEvent event, index) {
    if (event == GestureEvent.onSwipe) {
      print('onSwipe');
    } else {
      print('onTap');
    }
  },
)

可用参数

PhoenixSearchbar

PhoenixSearchbar 是一个搜索框的小部件。

使用示例

PhoenixSearchbar(
  hintText: "Search",
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  enabled: true,
  actionWidget: TextButton(
    onPressed: () {
      showSnackBar("Cancel");
    },
    child: const Text(
      "Cancel",
      style: TextStyle(
        color: Color(0xFF67C1BF),
        fontSize: 16,
        fontWeight: FontWeight.w500,
      ),
    ),
  ),
  radius: 24,
  onChanged: (value) {
    setState(() {
      result = value;
    });
  },
),

可用参数

PhoenixExpandableList

PhoenixExpandableList 是一个带有可展开功能的列表小部件。

使用示例

PhoenixExpandableList(
  expendableData: expendableData[i],
  margin: contentMargin ?? const EdgeInsets.only(top: 8, bottom: 16),
  contentMargin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(16),
  expandColor: Colors.white,
  shrinkColor: const Color(0xffF9F9F9),
  radius: 5,
  shrinkImage: SvgPicture.asset("assets/ic_minus.svg"),
  expandImage: SvgPicture.asset("assets/ic_plus.svg"),
  showData: expendableData[i].show,
  callback: () {
    setState(() {
      expendableData[i].show = !expendableData[i].show;
    });
  },
)

可用参数

PhoenixWarning

PhoenixWarning 是一个显示警告的小部件。

使用示例

PhoenixWarning(
  warningVisibility: true,
  messageWidget: const Text(
    "This is example of warning. Put any text here",
    style: TextStyle(
      color: Colors.black,
      fontSize: 10,
      fontWeight: FontWeight.normal,
    ),
  ),
  errorWidget: const Icon(Icons.error_outline, color: Colors.black),
  borderColor: Colors.red.withOpacity(.8),
  backgroundColor: Colors.red.withOpacity(.6),
  margin: const EdgeInsets.only(top: 8),
  padding: const EdgeInsets.all(8),
  radius: 5,
  spacerHeight: 100
)

可用参数

PhoenixListGroup

PhoenixListGroup 是一个生成菜单列表的小部件，其中包含子菜单。

使用示例

PhoenixListGroup(
  groupList: _sampleGrouping,
),

// 示例数据
Map<String, List<DataHelper>> _sampleGrouping = {
  'Data 1': [
    DataHelper(
      title: 'Title Data 2.1',
      desc: 'Description Data 2.1',
      isSelected: true,
      isVisible: false),
    DataHelper(
      title: 'Title Data 2.2',
      desc: 'Description Data 2.2',
      isSelected: true,
      isVisible: true),
    DataHelper(
      title: 'Title Data 2.3',
      desc: 'Description Data 2.3',
      isSelected: true,
      isVisible: true),
  ],
  'Data 2': [
    DataHelper(
      title: 'Title Data 2.1',
      desc: 'Description Data 2.1',
      isSelected: true,
      isVisible: true),
    DataHelper(
      title: 'Title Data 2.2',
      desc: 'Description Data 2.2',
      isSelected: true,
      isVisible: false),
    DataHelper(
      title: 'Title Data 2.3',
      desc: 'Description Data 2.3',
      isSelected: true,
      isVisible: true),
  ]
}

可用参数

PhoenixTextField

PhoenixTextField 是一个创建文本输入框的小部件。

使用示例