Flutter 仿霓虹材质风格单选按钮插件 material_neumorphic_radio 的使用

Flutter 仿霓虹材质风格单选按钮插件 material_neumorphic_radio 的使用

material_neumorphic_radio 是 Material Neumorphic 系列组件的一部分，用于创建具有霓虹材质风格的单选按钮。这些按钮可以为您的 Flutter 应用程序添加现代且独特的视觉效果。

使用方法

要使用 NeumorphicRadio 组件，您需要首先安装 material_neumorphic 包。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  material_neumorphic: ^0.1.0

然后运行 flutter pub get 来获取该包。

接下来，我们来看一个简单的例子，如何在 Flutter 中使用 NeumorphicRadio 组件。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Neumorphic Radio Example')),
        body: Center(child: MyRadioButtons()),
      ),
    );
  }
}

class MyRadioButtons extends StatefulWidget {
  [@override](/user/override)
  _MyRadioButtonsState createState() => _MyRadioButtonsState();
}

class _MyRadioButtonsState extends State<MyRadioButtons> {
  int _groupValue = 1;

  Widget _buildRadios() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        NeumorphicRadio(
          child: SizedBox(
            height: 50,
            width: 50,
            child: Center(
              child: Text("1"),
            ),
          ),
          value: 1,
          groupValue: _groupValue,
          onChanged: (value) {
            setState(() {
              _groupValue = value;
            });
          },
        ),
        NeumorphicRadio(
          child: SizedBox(
            height: 50,
            width: 50,
            child: Center(
              child: Text("2"),
            ),
          ),
          value: 2,
          groupValue: _groupValue,
          onChanged: (value) {
            setState(() {
              _groupValue = value;
            });
          },
        ),
        NeumorphicRadio(
          child: SizedBox(
            height: 50,
            width: 50,
            child: Center(
              child: Text("3"),
            ),
          ),
          value: 3,
          groupValue: _groupValue,
          onChanged: (value) {
            setState(() {
              _groupValue = value;
            });
          },
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Selected Value: $_groupValue'),
        SizedBox(height: 20),
        _buildRadios(),
      ],
    );
  }
}

解释

1. 导入必要的库：

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

2. 初始化状态：

   int _groupValue = 1;
   

3. 构建单选按钮组：

   Widget _buildRadios() {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         NeumorphicRadio(
           child: SizedBox(
             height: 50,
             width: 50,
             child: Center(
               child: Text("1"),
             ),
           ),
           value: 1,
           groupValue: _groupValue,
           onChanged: (value) {
             setState(() {
               _groupValue = value;
             });
           },
         ),
         NeumorphicRadio(
           child: SizedBox(
             height: 50,
             width: 50,
             child: Center(
               child: Text("2"),
             ),
           ),
           value: 2,
           groupValue: _groupValue,
           onChanged: (value) {
             setState(() {
               _groupValue = value;
             });
           },
         ),
         NeumorphicRadio(
           child: SizedBox(
             height: 50,
             width: 50,
             child: Center(
               child: Text("3"),
             ),
           ),
           value: 3,
           groupValue: _groupValue,
           onChanged: (value) {
             setState(() {
               _groupValue = value;
             });
           },
         ),
       ],
     );
   }
   

4. 将单选按钮组添加到主界面：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Text('Selected Value: $_groupValue'),
         SizedBox(height: 20),
         _buildRadios(),
       ],
     );
   }