Flutter Widget | 87 | GenderPicker, GenderPickerWithImage

Here is the video tutorial

Code

main.dart

import 'package:flutter/material.dart';

import 'package:gender_picker/gender_picker.dart';

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

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primaryColor: Color(0xFFC41A3B),

primaryColorLight: Color(0xFFFBE0E6),

accentColor: Color(0xFF1B1F32),

),

home: MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

String title = 'Gender Picker';

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(title),

centerTitle: true,

),

body: SingleChildScrollView(

child: Column(

children: <Widget>[

Text(

'Horizontal',

style: TextStyle(

fontSize: 22.0,

fontWeight: FontWeight.bold,

),

),

_genderWidget(false, false),

Divider(

thickness: 4.0,

),

Text(

'Vertical',

style: TextStyle(

fontSize: 22.0,

fontWeight: FontWeight.bold,

),

),

_genderWidget(false, true),

Divider(

thickness: 4.0,

),

// Optional

Text(

'Other Gender',

style: TextStyle(

fontSize: 22.0,

fontWeight: FontWeight.bold,

),

),

Divider(

thickness: 4.0,

),

Text(

'Horizontal',

style: TextStyle(

fontSize: 22.0,

fontWeight: FontWeight.bold,

),

),

_genderWidget(true, false),

Divider(

thickness: 4.0,

),

Text(

'Vertical',

style: TextStyle(

fontSize: 22.0,

fontWeight: FontWeight.bold,

),

),

_genderWidget(true, true),

],

),

),

);

}

Widget _genderWidget(bool _showOther, bool _alignment) {

return Container(

margin: EdgeInsets.all(16.0),

alignment: Alignment.center,

child: GenderPickerWithImage(

showOtherGender: _showOther,

verticalAlignedText: _alignment,

onChanged: (Gender _gender) {

print(_gender);

},

selectedGender: Gender.Male, //By Default

selectedGenderTextStyle:

TextStyle(color: Color(0xFFC41A3B), fontWeight: FontWeight.bold),

unSelectedGenderTextStyle:

TextStyle(color: Color(0xFF1B1F32), fontWeight: FontWeight.bold),

equallyAligned: true,

size: 64.0, // default size 40.0

animationDuration: Duration(seconds: 1),

isCircular: true, // by default true

opacityOfGradient: 0.5,

padding: EdgeInsets.all(8.0),

),

);

}

}

Don’t Forgot to add package in pubspec.yaml

gender_picker: ^1.0.2