LiewJunTung / pin_code_text_field

A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

wrapAlignment not working

hi-glenn opened this issue · comments

And , It is always center

Maybe you can show how you implemented it?

  1. wrapAlignment: WrapAlignment.spaceBetween not work.

  2. PinCodeTextField has two unnecessary inner padding on left and right. It leading to wrong alignment with other widgets in the Column.


image



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

class MyPinCodeTextField extends StatefulWidget {
  @override
  _MyPinCodeTextFieldState createState() => _MyPinCodeTextFieldState();
}

class _MyPinCodeTextFieldState extends State<MyPinCodeTextField> {
  TextEditingController controller = TextEditingController();
  String thisText = "";
  int pinLength = 6;

  bool hasError = false;
  String errorMessage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        decoration: BoxDecoration(
          border: Border.all(),
          color: Colors.blueGrey,
        ),
        padding: EdgeInsets.symmetric(
          horizontal: 20,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey,
            border: Border.all(),
          ),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
//              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(bottom: 60.0),
                  child: Text(thisText, style: Theme.of(context).textTheme.title),
                ),
                PinCodeTextField(
                  autofocus: false,
                  controller: controller,
                  highlight: true,
                  highlightColor: Colors.blue,
                  defaultBorderColor: Colors.black,
                  hasTextBorderColor: Colors.green,
                  maxLength: pinLength,
                  hasError: hasError,
                  onTextChanged: (text) {
                    setState(() {
                      hasError = false;
                    });
                  },
                  onDone: (text) {
                    print("DONE $text");
                  },
                  pinBoxWidth: 40,
                  wrapAlignment: WrapAlignment.spaceBetween,
                  pinCodeTextFieldLayoutType: PinCodeTextFieldLayoutType.AUTO_ADJUST_WIDTH,
                  pinBoxDecoration: ProvidedPinBoxDecoration.underlinedPinBoxDecoration,
                  pinTextStyle: TextStyle(fontSize: 30.0),
                  pinTextAnimatedSwitcherTransition: ProvidedPinBoxTextAnimation.scalingTransition,
                  pinTextAnimatedSwitcherDuration: Duration(milliseconds: 300),
                ),
                Visibility(
                  child: Text(
                    "Wrong PIN!",
                    style: TextStyle(color: Colors.red),
                  ),
                  visible: hasError,
                ),
                Container(
                  color: Colors.red,
                  width: double.infinity,
                  height: 20,
                ),
                Container(
                  padding: const EdgeInsets.only(top: 32.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                        child: MaterialButton(
                          color: Colors.blue,
                          textColor: Colors.white,
                          child: Text("SUBMIT"),
                          onPressed: () {
                            setState(() {
                              this.thisText = controller.text;
                            });
                          },
                        ),
                      ),
                      Expanded(
                        child: MaterialButton(
                          color: Colors.red,
                          textColor: Colors.white,
                          child: Text("SUBMIT Error"),
                          onPressed: () {
                            setState(() {
                              this.hasError = true;
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

WIth the latest version i still have the same issue