Flutter性别选择器插件gender_picker的使用

插件概述

gender_picker 是一个功能强大的性别选择组件，旨在为你的项目设计提供支持。这个插件的目标是提供一个终极的性别选择小部件。

该插件的所有源代码都是100% Dart编写，并且所有内容都位于 /lib 文件夹中。以下是一个示例界面截图：

安装

要在你的Flutter项目中使用 gender_picker 插件，请在 pubspec.yaml 文件中添加如下依赖项：

dependencies:
  gender_picker: ^1.1.0

然后运行 flutter pub get 来安装插件。

示例用法

下面是一个完整的示例demo，展示了如何在Flutter应用中使用 gender_picker 插件。此示例创建了一个简单的Flutter应用程序，其中包含不同配置的性别选择器。

import 'package:flutter/material.dart';
import 'package:gender_picker/source/enums.dart';
import 'package:gender_picker/source/gender_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gender Picker',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: MyHomePage(title: 'Gender Picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title = 'Gender Picker'}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Text(
                'Horizontal Aligned',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),
            getWidget(false, false),
            Divider(),

            Container(
              child: Text(
                'Vertical Aligned',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),
            getWidget(false, true),
            Divider(thickness: 8.0,),
            Container(
              child: Text(
                'Optional Other Gender\n',
                style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16.0),
              ),
            ),


            // If you want to show 3rd optional gender
            Container(
              child: Text(
                'Horizontal Aligned',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),
            getWidget(true, false),
            Divider(),

            Container(
              child: Text(
                'Vertical Aligned',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            ),
            getWidget(true, true),
            Divider(),
          ],
        ),
      ),
    );
  }

  Widget getWidget(bool showOtherGender, bool alignVertical) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 40),
      alignment: Alignment.center,
      child: GenderPickerWithImage(
        showOtherGender: showOtherGender,
        verticalAlignedText: alignVertical,
        
        // to show what's selected on app opens, but by default it's Male
        selectedGender: Gender.Male,
        selectedGenderTextStyle: TextStyle(
            color: Color(0xFF8b32a8), fontWeight: FontWeight.bold),
        unSelectedGenderTextStyle: TextStyle(
            color: Colors.black, fontWeight: FontWeight.normal),
        onChanged: (Gender? gender) {
          print(gender);
        },
        //Alignment between icons
        equallyAligned: true,
        
        animationDuration: Duration(milliseconds: 300),
        isCircular: true,
        // default : true,
        opacityOfGradient: 0.4,
        padding: const EdgeInsets.all(3),
        size: 50, //default : 40
      ),
    );
  }
}

在这个示例中，我们创建了不同的性别选择器布局：水平对齐、垂直对齐以及是否显示其他性别的选项。你可以根据需要调整这些参数来满足你的应用需求。

希望这个示例能够帮助你更好地理解和使用 gender_picker 插件！如果你有任何问题或需要进一步的帮助，请随时提问。