Flutter材质霓虹主题插件material_neumorphic_theme的使用

Flutter材质霓虹主题插件material_neumorphic_theme的使用

material_neumorphic_theme 是一个用于在 Flutter 应用中设置霓虹风格主题的插件。该插件允许开发者自定义颜色、深度、强度、光源等属性。

使用方法

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 定义亮色主题的颜色方案
    final colorScheme = ColorScheme.fromSeed(
      brightness: Brightness.light,
      seedColor: NeumorphicTheme.defaultSeedColor,
    );

    // 定义暗色主题的颜色方案
    final darkColorScheme = ColorScheme.fromSeed(
      brightness: Brightness.dark,
      seedColor: NeumorphicTheme.defaultSeedColor,
    );

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Neumorphic Theme Demo',
      theme: ThemeData(
        colorScheme: colorScheme,
        useMaterial3: true,
      ).copyWith(
        extensions: <ThemeExtension<dynamic>>[
          const NeumorphicTheme().fitWithColorSchema(colorScheme),
        ],
      ),
      darkTheme: ThemeData(
        colorScheme: darkColorScheme,
        useMaterial3: true,
      ).copyWith(
        extensions: <ThemeExtension<dynamic>>[
          const NeumorphicTheme().fitWithColorSchema(darkColorScheme),
        ],
      ),
      home: const MyHomePage(),
    );
  }
}

// 主页面
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Neumorphic Theme Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, Neumorphic Theme!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

解释

1. 导入必要的包：

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

2. 定义亮色和暗色主题的颜色方案：

   final colorScheme = ColorScheme.fromSeed(
     brightness: Brightness.light,
     seedColor: NeumorphicTheme.defaultSeedColor,
   );
   
   final darkColorScheme = ColorScheme.fromSeed(
     brightness: Brightness.dark,
     seedColor: NeumorphicTheme.defaultSeedColor,
   );
   

3. 配置 MaterialApp 并设置主题：

   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Neumorphic Theme Demo',
     theme: ThemeData(
       colorScheme: colorScheme,
       useMaterial3: true,
     ).copyWith(
       extensions: <ThemeExtension<dynamic>>[
         const NeumorphicTheme().fitWithColorSchema(colorScheme),
       ],
     ),
     darkTheme: ThemeData(
       colorScheme: darkColorScheme,
       useMaterial3: true,
     ).copyWith(
       extensions: <ThemeExtension<dynamic>>[
         const NeumorphicTheme().fitWithColorSchema(darkColorScheme),
       ],
     ),
     home: const MyHomePage(),
   );
   

4. 创建主页面并展示文本：

   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Neumorphic Theme Demo'),
         ),
         body: Center(
           child: Text(
             'Hello, Neumorphic Theme!',
             style: TextStyle(fontSize: 24),
           ),
         ),
       );
     }
   }