Flutter Claymorphism风格UI插件claymorphism的使用

Claymorphism Package

一个为现代美观设计提供粘土形态UI容器的Flutter插件。

特性

• 易于使用的粘土形态容器用于UI设计。
• 可自定义的属性以调整容器的外观。
• 提供多种容器形状和样式。
• 兼容Flutter网页和移动应用。

安装

在你的pubspec.yaml文件中添加以下行：

dependencies:
  claymorphism: ^0.1.2

示例

粘土卡片

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Center(
        child: ClayCard(
          height: MediaQuery.of(context).size.height * 0.35,
          width: MediaQuery.of(context).size.height * 0.35,
        ),
      ),
    );
  }
}

带阴影的粘土卡片

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Center(
        child: CardWithShadow(
          height: MediaQuery.of(context).size.height * 0.35,
          width: MediaQuery.of(context).size.height * 0.35,
        ),
      ),
    );
  }
}

完整示例代码

以下是完整的示例代码，展示了如何在一个Flutter应用中使用claymorphism插件。

import 'package:flutter/material.dart';

import 'screens/desktop.dart';
import 'screens/mobile.dart';
import 'screens/tablet.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const RoutePage(),
    );
  }
}

class RoutePage extends StatelessWidget {
  const RoutePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    if(screenWidth<640){
    return const Mobile();
    } else if(screenWidth>=640&&screenWidth<1000){
      return const Tablet();
    }
    return const Desktop();
  }
}