Flutter拟物化UI设计插件flutter_neumorphism_ui的使用

Flutter拟物化设计简介

Aesthetic Appeal（美学吸引力）

创建一个现代化、简洁且视觉上令人愉悦的界面，使其感觉触感丰富且吸引人。

User Experience（用户体验）

模仿物理表面，使用户界面更加直观和熟悉。

Customization（定制化）

提供创意控制，以实现独特且具有区分度的应用程序设计。

Stand Out（脱颖而出）

通过采用时尚的未来主义设计元素帮助应用程序脱颖而出。

Neumorphism（拟物化设计）

在扁平化和仿生设计之间取得平衡，使其成为追求极简主义但又带有深度的应用程序的有效选择。

示例代码

主文件

import 'package:example/card_items.dart';
import 'package:example/items.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.grey.shade300,
          ),
          useMaterial3: true,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Neu morphism"),
          ),
          backgroundColor: Colors.grey.shade300,
          body: Container(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Expanded(child: myWidget(context)),
                Expanded(
                  child: ListView.builder(
                      itemCount: 5,
                      itemBuilder: (BuildContext context, int index) {
                        return Items(width: size.width);
                      }),
                ),
              ],
            ),
          ),
        ));
  }

  Widget myWidget(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return CardItems(width: size.width);
          }),
    );
  }
}

卡片组件

import 'package:flutter/material.dart';

class CardItems extends StatelessWidget {
  final double width;

  const CardItems({required this.width, super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: FlutterNeumorphisms(
        onTap: () {},
        borderRadius: 12,
        bottomRightShadowBlurRadius: 15,
        bottomRightShadowSpreadRadius: 1,
        borderWidth: 5,
        backgroundColor: Colors.grey.shade300,
        topLeftShadowBlurRadius: 15,
        topLeftShadowSpreadRadius: 1,
        topLeftShadowColor: Colors.white,
        bottomRightShadowColor: Colors.grey.shade500,
        height: 100,
        width: width,
        bottomRightOffset: const Offset(4, 4),
        topLeftOffset: const Offset(-4, -4),
        child: const Row(
          children: [
            Icon(Icons.opacity_rounded, size: 30),
            SizedBox(width: 20),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Drop", style: TextStyle(fontSize: 20)),
                Text("Neu morphism", style: TextStyle(fontSize: 18)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

列表项组件

import 'package:flutter/material.dart';

class Items extends StatelessWidget {
  final double width;

  const Items({required this.width, super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: FlutterNeumorphisms(
        onTap: () {},
        borderRadius: 12,
        bottomRightShadowBlurRadius: 15,
        bottomRightShadowSpreadRadius: 1,
        borderWidth: 5,
        backgroundColor: Colors.grey.shade300,
        topLeftShadowBlurRadius: 15,
        topLeftShadowSpreadRadius: 1,
        topLeftShadowColor: Colors.white,
        bottomRightShadowColor: Colors.grey.shade500,
        height: 100,
        width: width,
        bottomRightOffset: const Offset(4, 4),
        topLeftOffset: const Offset(-4, -4),
        child: const Row(
          children: [
            Icon(Icons.opacity_rounded, size: 30),
            SizedBox(width: 20),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Drop", style: TextStyle(fontSize: 20)),
                Text("Neu morphism", style: TextStyle(fontSize: 18)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}