title: How to create custom pin code view in flutter?
body: <p>I want to create pin code view like below image , created custom text for design pin code view but unable to create like below image:</p>
  <p><a href="https://i.stack.imgur.com/7j0hf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7j0hf.png" alt="enter image description here" /></a></p>
  <p>code Which i Implemented:</p>
  <pre><code>
  import 'package:flutter/material.dart';
  import 'package:upstanders/global/theme/colors.dart';
  import 'package:upstanders/global/widgets/buttons.dart';
  import 'package:upstanders/register/view/view.dart';
  import 'package:upstanders/register/widgets/widgets.dart';
  
  class CreatePasscodeForm extends StatelessWidget {
    TextEditingController pin1Controller = TextEditingController();
    TextEditingController pin2Controller = TextEditingController();
    TextEditingController pin3Controller = TextEditingController();
    TextEditingController pin4Controller = TextEditingController();
    @override
    Widget build(BuildContext context) {
      final size = MediaQuery.of(context).size;
      return Container(
        width: size.width,
        height: size.height,
        alignment: Alignment.topCenter,
        padding: const EdgeInsets.only(left: 30, right: 30, top: 20),
        child: Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                &quot;Enter your passcode&quot;,
                style: TextStyle(
                    color: MyTheme.white,
                    fontSize: 20,
                    height: 2.000,
                    fontWeight: FontWeight.bold),
              ),
              SizedBox(height: size.height * 0.06),
              _pinRowInputs(),
              Expanded(
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 20),
                    child: RoundedBorderTextButton(
                      title: &quot;CREATE&quot;,
                      height: size.height * 0.06,
                      width: size.width / 2.7,
                      bgColor: MyTheme.primaryColor,
                      textColor: MyTheme.secondryColor,
                      onTap: () {
                        Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) =&gt; AddProfileScreen()));
                      },
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    }
  
    _pinRowInputs() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded(
            child: PinCodeTextField(
              controller: pin1Controller,
            ),
          ),
          Expanded(
            child: PinCodeTextField(
              controller: pin2Controller,
            ),
          ),
          Expanded(
            child: PinCodeTextField(
              controller: pin3Controller,
            ),
          ),
          Expanded(
            child: PinCodeTextField(
              controller: pin4Controller,
            ),
          ),
        ],
      );
    }
  }
  
  </code></pre>
  <p>pin_code_text_field.dart :</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class PinCodeTextField extends StatelessWidget {
    final TextEditingController controller;
    
  
    const PinCodeTextField({Key key, this.controller, })
        : super(key: key);
    @override
    Widget build(BuildContext context) {
      final size = MediaQuery.of(context).size;
      return Container(
        width: size.width / 5.5,
        height: size.height * 0.09,
        child: Container(
         padding: EdgeInsets.all(5),
         alignment: Alignment.center,
          
         child: TextFormField(
           obscureText: true,
           maxLength: 1,
           style: TextStyle(
             color: Colors.white,
             fontSize:30),
           keyboardType: TextInputType.number,
           textAlign: TextAlign.center,
           controller: controller,
           decoration: InputDecoration(
               filled: true,
              //  fillColor: Colors.white,
               counterText: &quot;&quot;,
               border: InputBorder.none
                // border: new OutlineInputBorder(
                // borderRadius: const BorderRadius.all(
                //   const Radius.circular(15.0),
                // ))
                ),
              
            
           validator: (value) {
             if (value.isEmpty) {
             
               return null;
             }
            
             return null;
           },
         ),
          ),
      );
    }
  }
  
  
  </code></pre>
  <p><strong>RESULT:</strong></p>
  <p><a href="https://i.stack.imgur.com/Y9yvI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y9yvI.jpg" alt="enter image description here" /></a></p>