Flutter设计风格插件neo_brutalism的使用

Flutter设计风格插件neo_brutalism的使用

Neo Brutalism Widgets

常用的Flutter Neo Brutalism风格小部件

在线演示 : https://neo-brutalism.web.app/

注意事项

该插件是由于我喜欢Neo Brutalism的设计风格，并在一些项目中使用它，希望与社区共享而创建的。

使用方法

你可以自定义每个小部件的阴影颜色、阴影偏移和背景颜色。所有小部件都会响应亮模式和暗模式，并从默认主题获取默认值。

NeoContainer(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(
      'NeoContainer',
      style: Theme.of(context).textTheme.bodyLarge,
    ),
  ),
)

特性

NeoContainer

NeoContainer 是一个基本容器的包装器。

NeoContainer(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(
      'NeoContainer',
      style: Theme.of(context).textTheme.bodyLarge,
    ),
  ),
)

NeoIconButton

NeoIconButton 是一个简单的可圆形或矩形的IconButton。

NeoIconButton(
  shape: BoxShape.rectangle,
  icon: Icons.add,
  onTap: () {},
)

NeoFab

NeoFab 类似于 NeoIconButton，但具有可选的标签和展开/折叠的功能。

NeoFab(
    expanded: expanded.value,
    text: 'Add to cart',
    icon: Icons.add,
    onPressed: () => expanded.value = !expanded.value,
)

NeoTextField

NeoTextField 提供了搜索框等文本输入功能。

NeoTextField(
  hintText: 'Search',
  fillColor: Theme.of(context).colorScheme.primaryContainer,
  foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
)

NeoSegmentedTabBar

NeoSegmentedTabBar 提供了分段式标签栏，支持自定义配置。

NeoSegmentedTabBar(
  tabs: const ['Tab 1', 'Tab 2', 'Tab 3'],
  onTabSelected: (index) => selectedIndex.value = index,
  selectedIndex: selectedIndex.value,
  tabConfig: TabConfig(
    borderRadius: 0.0,
    shadowColor: Theme.of(context).colorScheme.primary,
    foregroundColor: Theme.of(context).colorScheme.primary,
  ),
)

NeoSegmentedTabBar 还有一个可选的 TabConfig 属性用于额外的定制。

final double borderRadius;
final Color? backgroundColor;
final Color? foregroundColor;
final Color shadowColor;

完整示例代码

import 'package:example/utils/multi_value_listenable.dart';
import 'package:example/widgets/neo_container_section.dart';
import 'package:example/widgets/neo_fab_section.dart';
import 'package:example/widgets/neo_icon_button_section.dart';
import 'package:example/widgets/neo_segmented_tab_bar_section.dart';
import 'package:example/widgets/neo_text_field_section.dart';
import 'package:flutter/material.dart';
import 'package:neo_brutalism/neo_brutalism.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final themeMode = ValueNotifier(ThemeMode.light);
    final seedColor = ValueNotifier(Colors.purple.shade500);

    return ValueListenableBuilder2<ThemeMode, Color>(
      first: themeMode,
      second: seedColor,
      builder: (context, first, second, child) {
        final brightness = themeMode.value == ThemeMode.light
            ? Brightness.light
            : Brightness.dark;

        return MaterialApp(
          title: 'Neo Brutalism',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            brightness: brightness,
            useMaterial3: true,
            colorSchemeSeed: second,
          ),
          themeMode: first,
          home: MyHomePage(
            onSeedColorChange: (color) {
              seedColor.value = color;
            },
            onThemeChange: () {
              themeMode.value = themeMode.value == ThemeMode.light
                  ? ThemeMode.dark
                  : ThemeMode.light;
            },
          ),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    super.key,
    required this.onSeedColorChange,
    required this.onThemeChange,
  });

  final ValueChanged<Color> onSeedColorChange;
  final VoidCallback onThemeChange;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final brightness = Theme.of(context).brightness;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Neo Brutalism'),
        actions: [
          NeoIconButton(
            icon: Icons.color_lens_outlined,
            backgroundColor: Theme.of(context).colorScheme.primaryContainer,
            foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
            onTap: () async {
              final color = await ColorPickerDialog.show(context);

              if (color != null) {
                onSeedColorChange(color);
              }
            },
          ),
          const SizedBox(width: 8.0),
          NeoIconButton(
            icon: brightness == Brightness.light
                ? Icons.light_mode_outlined
                : Icons.dark_mode_outlined,
            backgroundColor: brightness == Brightness.light
                ? Colors.yellow.shade600
                : Colors.blue.shade800,
            onTap: onThemeChange,
          ),
          const SizedBox(width: 16.0),
        ],
      ),
      body: const SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              NeoFabSection(),
              Divider(height: 32.0),
              NeoIconButtonSection(),
              Divider(height: 32.0),
              NeoTextFieldSection(),
              Divider(height: 32.0),
              NeoContainerSection(),
              Divider(height: 32.0),
              NeoSegmentedTabBarSection(),
            ],
          ),
        ),
      ),
    );
  }
}

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

  static Future<Color?> show(BuildContext context) async {
    return await showDialog<Color>(
      context: context,
      builder: (context) => const ColorPickerDialog(),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Dialog(
      child: SizedBox(
        height: 300.0,
        width: 300.0,
        child: Center(
          child: Wrap(
              children: Colors.accents.map((color) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: NeoIconButton(
                icon: Icons.color_lens_outlined,
                backgroundColor: color,
                onTap: () {
                  Navigator.of(context).pop(color.shade400);
                },
              ),
            );
          }).toList()),
        ),
      ),
    );
  }
}