Flutter插件shammo的介绍使用

本文将介绍如何使用shammo插件，该插件包含许多开发者在构建应用程序时通常需要的功能和组件。这些组件包括使代码更简洁的函数以及简化常见小部件实现的工具。

Utilities

这些是可以在整个应用程序中使用的实用函数列表。

MediaQuery

可以通过调用链的最后一个方法来访问任何MediaQuery。例如：

// 访问屏幕高度
MediaQuery.of(context).size.height;

// 使用简化的方法
height(context);

// 或者访问完整的 MediaQuery 类
mediaQuery(context);

Theme

可以通过调用链的最后一个方法来访问与主题相关的功能。例如：

// 访问 bodyText1 方法
bodyText1(context);

// 替代方式
Theme.of(context).textTheme.bodyText1;

// 访问主题本身
theme(context);

// 访问文本主题
textTheme(context);

// 访问图标主题
iconTheme(context);

// 访问颜色
cardColor(context);
canvasColor(context);

Navigator

可以通过调用链的最后一个方法来处理导航功能。例如：

// 弹出当前路由
pop(context);

// 替代方式
if (Navigator.maybeOf(context) != null && Navigator.of(context).mounted) {
  if (Navigator.of(context).canPop()) {
    Navigator.of(context).pop();
  }
}

// 推入新路由
push(context, HomePage());

// 替代方式
if (Navigator.maybeOf(context) != null && Navigator.of(context).mounted) {
  Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => HomePage()),
  );
}

// 关闭默认的适应性路由行为
push(context, HomePage(), adaptive: false);

其他实用函数

以下是一些其他实用函数：

showSnackBar(context, "Hey there");
openDialog(
  context,
  Text("Delete"),
  Text("Are you sure you want to deleted?"),
  actions: [
    ElevatedButton(child: Text("Yes")),
    ElevatedButton(child: Text("No")),
  ],
);
closeDialog(context);
removeSnackbar(context);
generateColor("text", "#ffe");
getTheme(context).cardColor;
getMedia(context).padding;
commaSeperatedNumber(100000);
toDouble(number);
toInt(number);
copy(context, text);
convertToColor("#fes");
getColorCode("1d34a1");
confirmAction(
  context,
  confirm: "Delete",
  onConfirm: () => list.removeAt(0),
);
showSnackBar(context, "Done");
percentageCalculator(14023, 20);

Components

以下是插件提供的各种组件示例。

Badge

用于创建徽章：

Badge(
  child: Icon(Icons.bell),
  badge: Text("10+"),
  badgeColor: Colors.red,
)

ContainerButton

用于创建一个完全可点击的容器，带有图标：

ContainerButton(
  body: Text("Click"),
  action: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {},
  ),
)

PostCard

用于创建一个可以用于展示帖子的卡片：

PostCard(
  title: Text("Seth's Post"),
  action: IconButton(
    icon: Icon(Icons.more_vert),
    onPressed: () {},
  ),
  content: Text("Seth is awesome"),
  avatar: CircleAvatar(
    backgroundImage: NetworkImage("https://seth.com/dp"),
  ),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.thumb_up),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.comment),
    ),
  ],
)

Carousel

用于创建漂亮的轮播图：

Carousel(
  onTap: () {},
  aspectRatio: 16 / 8,
  items: [
    Image.asset("assets/images/img.png"),
    Image.asset("assets/images/img1.png"),
    Image.asset("assets/images/img2.png"),
  ],
)

MaterialRadio

用于创建单选按钮：

MaterialRadio(
  color: Colors.blue,
  onChange: () {},
)

CountDown

用于创建倒计时（单位为秒）：

CountDown(
  duration: 60,
)

MenuButton

用于创建带有前导和后置图标的按钮：

MenuButton(
  header: Text("Scan QR Code"),
  description: Text("Use this to Scan QRCodes"),
  route: QRCodePage(),
  leading: Icons.qrcode,
)

CustomTextField

用于轻松创建文本输入框：

CustomTextField(
  label: Text("Name"),
  hint: "First name",
  border: OutlineInputBorder(),
)

MaterialCard

用于创建一个带有头像、标题等的卡片：

MaterialCard(
  title: Text("Name"),
  avatar: Image.network(url),
  decoration: BoxDecoration(color: Colors.white),
  content: Carousel(
    onTap: () {},
    aspectRatio: 16 / 8,
    items: [
      Image.asset("assets/images/img.png"),
      Image.asset("assets/images/img1.png"),
      Image.asset("assets/images/img2.png"),
    ],
  ),
)

示例代码

以下是一个完整的示例代码，展示了如何使用shammo插件中的PostCard组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("PostCard Example"),
        ),
        body: Center(
          child: PostCard(
            title: Text("Seth's Post"),
            action: IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {},
            ),
            content: Text("Seth is awesome"),
            avatar: CircleAvatar(
              backgroundImage: NetworkImage("https://seth.com/dp"),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.thumb_up),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.comment),
              ),
            ],
          ),
        ),
      ),
    );
  }
}