pin_code_fields
pin_code_fields copied to clipboard
When pin_code becomes the focus, the build method is called multiple times
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????