Skip to content

Commit 2ac7c04

Browse files
LaoMengFlutterLaoMengFlutter
committed
ADD
1 parent 9534ddd commit 2ac7c04

File tree

9 files changed

+373
-242
lines changed

9 files changed

+373
-242
lines changed

‎flutter_verification_box/CHANGELOG.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
## [1.0.0] - TODO: Add release date.
1+
## [1.0.3] - TODO: 增加type类型export.
22

3-
* TODO: Describe initial release.
3+
* TODO: 增加type类型export.

‎flutter_verification_box/README.md

Lines changed: 134 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,138 @@
1-
# flutter_verification_box
1+
## 引入
2+
```
3+
dependencies:
4+
flutter_verification_box: ^1.0.3
5+
```
6+
导入包：
7+
```
8+
import 'package:flutter_verification_box/verification_box.dart';
9+
```
210

3-
A new Flutter package.
11+
## 使用
412

5-
## Getting Started
613

7-
This project is a starting point for a Dart
8-
[package](https://flutter.dev/developing-packages/),
9-
a library module containing code that can be shared easily across
10-
multiple Flutter or Dart projects.
14+
```dart
15+
Container(
16+
height: 45,
17+
child: VerificationBox(),
18+
)
19+
```
20+
21+
效果如下：
22+
23+
<img src="https://github.com/781238222/imgs/raw/master/verification_box/verification_box_1.png" style="zoom:33%;" />
24+
25+
设置验证码的数量，比如设置4个：
26+
27+
```dart
28+
VerificationBox(
29+
count: 4,
30+
)
31+
```
32+
33+
效果如下：
34+
35+
![](https://github.com/781238222/imgs/raw/master/verification_box/verification_box_2.png)
36+
37+
设置样式，包括边框的颜色、宽度、圆角：
38+
39+
```dart
40+
VerificationBox(
41+
borderColor: Colors.lightBlue,
42+
borderWidth: 3,
43+
borderRadius: 50,
44+
)
45+
```
46+
47+
效果如下：
48+
49+
![](https://github.com/781238222/imgs/raw/master/verification_box/verification_box_3.png)
50+
51+
除了“盒子”样式，还支持下划线样式：
52+
53+
```dart
54+
VerificationBox(
55+
type: VerificationBoxItemType.underline,
56+
)
57+
```
58+
59+
效果如下：
60+
61+
![](https://github.com/781238222/imgs/raw/master/verification_box/verification_box_4.png)
62+
63+
设置数字的样式：
64+
65+
```dart
66+
VerificationBox(
67+
textStyle: TextStyle(color: Colors.lightBlue),
68+
)
69+
```
70+
71+
效果如下：
72+
73+
![](https://github.com/781238222/imgs/raw/master/verification_box/verification_box_5.png)
74+
75+
显示光标，设置光标样式：
76+
77+
```dart
78+
VerificationBox(
79+
showCursor: true,
80+
cursorWidth: 2,
81+
cursorColor: Colors.red,
82+
cursorIndent: 10,
83+
cursorEndIndent: 10,
84+
)
85+
```
86+
87+
效果如下：
88+
89+
<img src="https://github.com/781238222/imgs/raw/master/verification_box/verification_box_6.gif" style="zoom:33%;" />
90+
91+
还可以设置光标为整个边框，如下：
92+
93+
```dart
94+
VerificationBox(
95+
focusBorderColor: Colors.lightBlue,
96+
)
97+
```
98+
99+
效果如下：
100+
101+
<img src="https://github.com/781238222/imgs/raw/master/verification_box/verification_box_7.gif" style="zoom:33%;" />
102+
103+
终极大招，如果你觉得这个效果不好，你可以自定义`decoration`：
104+
105+
```dart
106+
VerificationBox(
107+
decoration: BoxDecoration(
108+
image: DecorationImage(image: AssetImage('images/box.png')),
109+
),
110+
textStyle: TextStyle(color: Colors.lightBlue),
111+
),
112+
)
113+
```
114+
115+
效果如下：
116+
117+
<img src="https://github.com/781238222/imgs/raw/master/verification_box/verification_box_8.gif" style="zoom:33%;" />
118+
119+
120+
121+
验证码输入完成后回调`onSubmitted`，用法如下：
122+
123+
```dart
124+
VerificationBox(
125+
onSubmitted: (value){
126+
print('$value');
127+
},
128+
)
129+
```
130+
131+
输入完成后，默认键盘消失，设置为不消失，代码如下：
132+
133+
```dart
134+
VerificationBox(
135+
unfocus: false,
136+
)
137+
```
11138

12-
For help getting started with Flutter, view our
13-
[online documentation](https://flutter.dev/docs), which offers tutorials,
14-
samples, guidance on mobile development, and a full API reference.

‎flutter_verification_box/__MACOSX/flutter_verification_box/._README.md

244 Bytes
Binary file not shown.

‎flutter_verification_box/lib/src/verification_box.dart

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
library flutter_verification_box;
2+
3+
import 'package:flutter/cupertino.dart';
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter/services.dart';
6+
import 'package:flutter_verification_box/src/verification_box_item.dart';
7+
8+
///
9+
/// 验证码输入框
10+
///
11+
class VerificationBox extends StatefulWidget {
12+
VerificationBox(
13+
{this.count = 6,
14+
this.itemWidget = 45,
15+
this.onSubmitted,
16+
this.type = VerificationBoxItemType.box,
17+
this.decoration,
18+
this.borderWidth = 2.0,
19+
this.borderRadius = 5.0,
20+
this.textStyle,
21+
this.focusBorderColor,
22+
this.borderColor,
23+
this.unfocus = true,
24+
this.autoFocus = true,
25+
this.showCursor = false,
26+
this.cursorWidth = 2,
27+
this.cursorColor,
28+
this.cursorIndent = 10,
29+
this.cursorEndIndent = 10});
30+
31+
///
32+
/// 几位验证码，一般6位，还有4位的
33+
///
34+
final int count;
35+
36+
///
37+
/// 没一个item的宽
38+
///
39+
final double itemWidget;
40+
41+
///
42+
/// 输入完成回调
43+
///
44+
final ValueChanged onSubmitted;
45+
46+
///
47+
/// 每个item的装饰类型，[VerificationBoxItemType]
48+
///
49+
final VerificationBoxItemType type;
50+
51+
///
52+
/// 每个item的样式
53+
///
54+
final Decoration decoration;
55+
56+
///
57+
/// 边框宽度
58+
///
59+
final double borderWidth;
60+
61+
///
62+
/// 边框颜色
63+
///
64+
final Color borderColor;
65+
66+
///
67+
/// 获取焦点边框的颜色
68+
///
69+
final Color focusBorderColor;
70+
71+
///
72+
/// [VerificationBoxItemType.box] 边框圆角
73+
///
74+
final double borderRadius;
75+
76+
///
77+
/// 文本样式
78+
///
79+
final TextStyle textStyle;
80+
81+
///
82+
/// 输入完成后是否失去焦点，默认true，失去焦点后，软键盘消失
83+
///
84+
final bool unfocus;
85+
86+
///
87+
/// 是否自动获取焦点
88+
///
89+
final bool autoFocus;
90+
91+
///
92+
/// 是否显示光标
93+
///
94+
final bool showCursor;
95+
96+
///
97+
/// 光标颜色
98+
///
99+
final Color cursorColor;
100+
101+
///
102+
/// 光标宽度
103+
///
104+
final double cursorWidth;
105+
106+
///
107+
/// 光标距离顶部距离
108+
///
109+
final double cursorIndent;
110+
111+
///
112+
/// 光标距离底部距离
113+
///
114+
final double cursorEndIndent;
115+
116+
@override
117+
State<StatefulWidget> createState() => _VerificationBox();
118+
}
119+
120+
class _VerificationBox extends State<VerificationBox> {
121+
TextEditingController _controller;
122+
123+
FocusNode _focusNode;
124+
125+
List _contentList = [];
126+
127+
@override
128+
void initState() {
129+
List.generate(widget.count, (index) {
130+
_contentList.add('');
131+
});
132+
_controller = TextEditingController();
133+
_focusNode = FocusNode();
134+
super.initState();
135+
}
136+
137+
@override
138+
Widget build(BuildContext context) {
139+
return GestureDetector(
140+
onTap: () {
141+
FocusScope.of(context).requestFocus(_focusNode);
142+
},
143+
child: Stack(
144+
children: <Widget>[
145+
_buildTextField(),
146+
Positioned.fill(
147+
child: Row(
148+
mainAxisAlignment: MainAxisAlignment.spaceAround,
149+
children: List.generate(widget.count, (index) {
150+
return Container(
151+
width: widget.itemWidget,
152+
child: VerificationBoxItem(
153+
data: _contentList[index],
154+
textStyle: widget.textStyle,
155+
type: widget.type,
156+
decoration: widget.decoration,
157+
borderRadius: widget.borderRadius,
158+
borderWidth: widget.borderWidth,
159+
borderColor: (_controller.text.length == index
160+
? widget.focusBorderColor
161+
: widget.borderColor) ??
162+
widget.borderColor,
163+
showCursor: widget.showCursor && _controller.text.length == index,
164+
cursorColor: widget.cursorColor,
165+
cursorWidth: widget.cursorWidth,
166+
cursorIndent: widget.cursorIndent,
167+
cursorEndIndent: widget.cursorEndIndent,
168+
),
169+
);
170+
}),
171+
)),
172+
],
173+
),
174+
);
175+
}
176+
177+
///
178+
/// 构建TextField
179+
///
180+
_buildTextField() {
181+
return TextField(
182+
controller: _controller,
183+
focusNode: _focusNode,
184+
decoration: InputDecoration(
185+
border: UnderlineInputBorder(
186+
borderSide: BorderSide(color: Colors.transparent)),
187+
enabledBorder: UnderlineInputBorder(
188+
borderSide: BorderSide(color: Colors.transparent)),
189+
focusedBorder: UnderlineInputBorder(
190+
borderSide: BorderSide(color: Colors.transparent)),
191+
),
192+
cursorWidth: 0,
193+
autofocus: widget.autoFocus,
194+
inputFormatters: [
195+
WhitelistingTextInputFormatter(RegExp("[0-9]")),
196+
],
197+
maxLength: widget.count,
198+
buildCounter: (
199+
BuildContext context, {
200+
int currentLength,
201+
int maxLength,
202+
bool isFocused,
203+
}) {
204+
return Text('');
205+
},
206+
keyboardType: TextInputType.number,
207+
style: TextStyle(color: Colors.transparent),
208+
onChanged: _onValueChange,
209+
);
210+
}
211+
212+
_onValueChange(value) {
213+
for (int i = 0; i < widget.count; i++) {
214+
if (i < value.length) {
215+
_contentList[i] = value.substring(i, i + 1);
216+
} else {
217+
_contentList[i] = '';
218+
}
219+
}
220+
setState(() {});
221+
222+
if (value.length == widget.count) {
223+
if (widget.unfocus) {
224+
_focusNode.unfocus();
225+
}
226+
if (widget.onSubmitted != null) {
227+
widget.onSubmitted(value);
228+
}
229+
}
230+
}
231+
}

‎flutter_verification_box/lib/verification_box_cursor.dart renamed to ‎flutter_verification_box/lib/src/verification_box_cursor.dart

File renamed without changes.

‎flutter_verification_box/lib/verification_box_item.dart renamed to ‎flutter_verification_box/lib/src/verification_box_item.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'package:flutter/material.dart';
2-
import 'package:flutter_verification_box/verification_box_cursor.dart';
2+
import 'package:flutter_verification_box/src/verification_box_cursor.dart';
33

44
///
55
/// 输入框样式

0 commit comments

Comments
 (0)