Flutter拟物风格UI插件flutter_neumorphic_null_safety的使用

安装

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_neumorphic: ^3.0.3

然后在你的.dart文件中导入该库：

import 'package:flutter_neumorphic_null_safety/flutter_neumorphic.dart';

小部件

Neumorphic

Neumorphic 是主要的拟物化小部件，它会根据光源和深度添加白色或暗色渐变。

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)), 
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey
  ),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.white,
  ),
)

NeumorphicButton

NeumorphicButton 是一个可以响应用户交互的拟物化按钮。

NeumorphicButton(
  onPressed: () {
    print("Button pressed");
  },
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(8)),
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey,
  ),
  padding: const EdgeInsets.all(12.0),
  child: Text("Press Me"),
)

NeumorphicText

NeumorphicText 是一个拟物化的文本组件（仅支持正深度）。

NeumorphicText(
  "Hello Flutter",
  style: NeumorphicStyle(
    depth: 4,
    color: Colors.white,
  ),
  textStyle: NeumorphicTextStyle(
    fontSize: 18,
  ),
)

NeumorphicIcon

NeumorphicIcon 是一个拟物化的图标组件。

NeumorphicIcon(
  Icons.add_circle,
  size: 80,
)

NeumorphicSwitch

NeumorphicSwitch 是一个开关按钮，当激活时会采用强调色。

NeumorphicSwitch(
  value: true,
  onChanged: (value) {
    print("Switch changed to $value");
  },
  style: NeumorphicSwitchStyle(
    activeTrackColor: Colors.green,
    inactiveTrackColor: Colors.grey,
    thumbColor: Colors.white,
  ),
)

NeumorphicApp

NeumorphicApp 是一个直接在项目中使用的应用，它处理了主题和导航。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicApp(
      debugShowCheckedModeBanner: false,
      title: 'Neumorphic App',
      themeMode: ThemeMode.light,
      theme: NeumorphicThemeData(
        baseColor: Color(0xFFFFFFFF),
        lightSource: LightSource.topLeft,
        depth: 10,
      ),
      darkTheme: NeumorphicThemeData(
        baseColor: Color(0xFF3E3E3E),
        lightSource: LightSource.topLeft,
        depth: 6,
      ),
      home: MyHomePage(),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_neumorphic_null_safety 插件创建一个简单的拟物风格界面。

import 'package:flutter/material.dart';
import 'package:flutter_neumorphic_null_safety/flutter_neumorphic.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      themeMode: ThemeMode.light,
      theme: NeumorphicThemeData(
        baseColor: Color(0xFFFFFFFF),
        lightSource: LightSource.topLeft,
        depth: 10,
      ),
      darkTheme: NeumorphicThemeData(
        baseColor: Color(0xFF3E3E3E),
        lightSource: LightSource.topLeft,
        depth: 6,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: NeumorphicFloatingActionButton(
        child: Icon(Icons.add, size: 30),
        onPressed: () {},
      ),
      backgroundColor: NeumorphicTheme.baseColor(context),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            NeumorphicButton(
              onPressed: () {
                print("onClick");
              },
              style: NeumorphicStyle(
                shape: NeumorphicShape.flat,
                boxShape: NeumorphicBoxShape.circle(),
              ),
              padding: const EdgeInsets.all(12.0),
              child: Icon(
                Icons.favorite_border,
                color: _iconsColor(context),
              ),
            ),
            NeumorphicButton(
              margin: EdgeInsets.only(top: 12),
              onPressed: () {
                NeumorphicTheme.of(context).themeMode =
                    NeumorphicTheme.isUsingDark(context)
                        ? ThemeMode.light
                        : ThemeMode.dark;
              },
              style: NeumorphicStyle(
                shape: NeumorphicShape.flat,
                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(8)),
              ),
              padding: const EdgeInsets.all(12.0),
              child: Text(
                "Toggle Theme",
                style: TextStyle(color: _textColor(context)),
              ),
            ),
            NeumorphicButton(
              margin: EdgeInsets.only(top: 12),
              onPressed: () {
                Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) {
                  return FullSampleHomePage();
                }));
              },
              style: NeumorphicStyle(
                shape: NeumorphicShape.flat,
                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(8)),
              ),
              padding: const EdgeInsets.all(12.0),
              child: Text(
                "Go to full sample",
                style: TextStyle(color: _textColor(context)),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Color _iconsColor(BuildContext context) {
    final theme = NeumorphicTheme.of(context);
    if (theme.isUsingDark) {
      return theme.current.accentColor;
    } else {
      return null;
    }
  }

  Color _textColor(BuildContext context) {
    if (NeumorphicTheme.isUsingDark(context)) {
      return Colors.white;
    } else {
      return Colors.black;
    }
  }
}