pin_code_fields icon indicating copy to clipboard operation
pin_code_fields copied to clipboard

When pin_code becomes the focus, the build method is called multiple times

Open yanashenyang opened this issue 6 months ago • 1 comments

When pin_code becomes the focus, the build method is called multiple times

demo here:

import 'dart:async';

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

class TestPage extends StatelessWidget {
  TestPage({super.key});

  @override
  Widget build(BuildContext context) {
    print('test page build');
    return Scaffold(
      appBar: AppBar(
        title: Text('test page'),
      ),
      body: _codeWidget(context),
    );
  }

  final errorController = StreamController<ErrorAnimationType>();

  _codeWidget(BuildContext context) {
    return SizedBox(
      height: 52,
      width: MediaQuery.of(context).size.width,
      child: PinCodeTextField(
        length: 4,
        cursorColor: const Color(0xFF009B3C),
        keyboardType: TextInputType.number,
        obscureText: false,
        animationType: AnimationType.scale,
        pinTheme: PinTheme(
          shape: PinCodeFieldShape.box,
          borderRadius: BorderRadius.circular(5),
          fieldHeight: 52,
          fieldWidth: 52,
        ),
        animationDuration: const Duration(milliseconds: 300),
        enableActiveFill: true,
        errorAnimationController: errorController,
        onCompleted: (v) {
          print("Completed");
          Future.delayed(const Duration(seconds: 1)).then((_) {
            errorController.add(ErrorAnimationType.shake); // This will shake the pin code field
          });
        },
        appContext: context,
      ),
    );
  }
}

console:

flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build
flutter: test page build

why????

yanashenyang avatar Aug 23 '24 08:08 yanashenyang