神经形态容器

为您的 Flutter 项目完全可定制的神经形态容器。

img2

img4--1-

img6

入门

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  neumorphic_container: "^0.0.1+2"

在您的库中添加以下导入

import 'package:neumorphic_container/neumorphic_container.dart';

要开始使用 Flutter，请查看在线 文档。

用法

简单容器：为了获得最佳效果，请将周围 widget 的背景颜色设置为与您为容器设置的颜色相匹配。

NeumorphicContainer(
              height: 150,
              width: 150,
              borderRadius: 10,
              primaryColor: Color(0xfff0f0f0),
              curvature: Curvature.flat,
            ),

img3

带边框的容器

 NeumorphicContainer(
              height: 130,
              width: 130,
              borderRadius: 150,
              primaryColor: Color(0xff292929),
              //add border color and thickness
              borderColor: Colors.orange,
              borderThickness: 1,
              curvature: Curvature.concave,
              child: Icon(Icons.phone,color: Colors.orange,size: 30,),
            ),

img5

曲率

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

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    Color color = Color(0xfff0f0f0);
    return Scaffold(
      backgroundColor: color,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                depth: 20,
                primaryColor: color,
                //flat neumorphism design
                curvature: Curvature.flat,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                primaryColor: color,
                spread: 5,
                //convex neumorphism design
                curvature: Curvature.convex,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: NeumorphicContainer(
                height: 150,
                width: 150,
                borderRadius: 150,
                primaryColor: color,
                //concave neumorphism design
                curvature: Curvature.concave,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

img4

入门

本项目是 Dart package 的起点，这是一个可以轻松跨多个 Flutter 或 Dart 项目共享的代码库模块。

要开始使用Flutter，请查看我们的在线文档，其中提供了教程、示例、有关移动开发的指导以及完整的API参考。

GitHub

https://github.com/AditiRavi/Neumorphic-Container