Flutter拟物化风格UI插件material_neumorphic的使用

Flutter拟物化风格UI插件material_neumorphic的使用

在本教程中，我们将介绍如何使用material_neumorphic插件来创建拟物化风格的用户界面。material_neumorphic插件包含了许多用于构建拟物化风格界面的组件。

包含的组件

• material_neumorphic_app_bar
• material_neumorphic_background
• material_neumorphic_button
• material_neumorphic_checkbox
• material_neumorphic_dropdown
• material_neumorphic_icon
• material_neumorphic_indicator
• material_neumorphic_progress
• material_neumorphic_radio
• material_neumorphic_slider
• material_neumorphic_switch
• material_neumorphic_text
• material_neumorphic_textfield

示例

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: MaterialNeumorphicAppBar(
          title: Text("拟物化风格示例"),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 400,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 3), // changes position of shadow
                ),
              ],
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                MaterialNeumorphicText(
                  text: "Hello, Neumorphic!",
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
                SizedBox(height: 20),
                MaterialNeumorphicButton(
                  onPressed: () {},
                  child: Text("点击我"),
                ),
                SizedBox(height: 20),
                MaterialNeumorphicCheckbox(
                  value: false,
                  onChanged: (bool? newValue) {},
                ),
                SizedBox(height: 20),
                MaterialNeumorphicSlider(
                  value: 0.5,
                  min: 0.0,
                  max: 1.0,
                  divisions: 10,
                  label: Text("滑块"),
                  onChanged: (double newValue) {},
                ),
                SizedBox(height: 20),
                MaterialNeumorphicSwitch(
                  value: false,
                  onChanged: (bool newValue) {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

1. 导入包:

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

   导入Flutter框架的基本库和material_neumorphic插件。

2. 创建主应用类:

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: MaterialNeumorphicAppBar(
             title: Text("拟物化风格示例"),
           ),
           body: Center(
             child: Container(
               width: 300,
               height: 400,
               decoration: BoxDecoration(
                 color: Colors.white,
                 borderRadius: BorderRadius.circular(10),
                 boxShadow: [
                   BoxShadow(
                     color: Colors.grey.withOpacity(0.5),
                     spreadRadius: 5,
                     blurRadius: 7,
                     offset: Offset(0, 3), // 改变阴影的位置
                   ),
                 ],
               ),
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   MaterialNeumorphicText(
                     text: "Hello, Neumorphic!",
                     fontSize: 20,
                     fontWeight: FontWeight.bold,
                   ),
                   SizedBox(height: 20),
                   MaterialNeumorphicButton(
                     onPressed: () {},
                     child: Text("点击我"),
                   ),
                   SizedBox(height: 20),
                   MaterialNeumorphicCheckbox(
                     value: false,
                     onChanged: (bool? newValue) {},
                   ),
                   SizedBox(height: 20),
                   MaterialNeumorphicSlider(
                     value: 0.5,
                     min: 0.0,
                     max: 1.0,
                     divisions: 10,
                     label: Text("滑块"),
                     onChanged: (double newValue) {},
                   ),
                   SizedBox(height: 20),
                   MaterialNeumorphicSwitch(
                     value: false,
                     onChanged: (bool newValue) {},
                   ),
                 ],
               ),
             ),
           ),
         ),
       );
     }
   }