如何在注册按钮颤动中使用CircularProgressIndicator

Question

我是flutter的新手，想知道在我的布局中添加CircularProgressIndicator的更好方法。我设计了注册屏幕和集成API按钮点击。我想在用户单击按钮时显示CircularProgressIndicator，并在API执行完成时将其关闭。

有人知道怎么做吗？

class _SignUpState extends State<SignUp> {
//  String name, email, phone, location
Authentication authentication = Authentication();
final snackBar = SnackBar(content: Text('User enregistré avec succès'));
var _formKey = GlobalKey<FormState>();
/* @override
void dispose() {

super.dispose();
}*/
// final GlobalKey<FormState> _formkey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(3, 9, 23, 1),
body: Background(
// padding: EdgeInsets.all(30),
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1.2,
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Tracar vous dit Bonjour',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Color(0xC2DEB522))),
SizedBox(
height: 10,
),
Text('Inscrivez-vous SVP',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Color(0xFFCFCFCC).withOpacity(0.5)))
],
)),
),
SizedBox(
height: 40,
),
FadeAnimation(
1.5,
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xFFFFFFFF).withOpacity(0.9)),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _emailController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: " Adresse mail"),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre adresse email';
}
if (!RegExp(
"^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-z]")
.hasMatch(value)) {
return 'Entrez email valide';
}
return null;
},

),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _nameController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: " Nom"),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre nom';
}
if (!RegExp("^[a-zA-Z0-9+_.-]")
.hasMatch(value)) {
return 'Entrez un nom valide';
}
return null;
},
/* onSaved: (String value) {
name = value;
},*/
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _phoneController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "N° Tel"),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre num Tel ';
}
if (!RegExp('^(?:[+0][1-9])?[0-9]{10,12}')
.hasMatch(value)) {
return 'Entrez un num Tel valide';
}
return null;
},
/*  onSaved: (String value) {
name = value;
},*/
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _usernameController,
keyboardType: TextInputType.streetAddress,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "Nom utilisateur"),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre psudo';
}
if (!RegExp("^[a-zA-Z0-9+_.-]")
.hasMatch(value)) {
return 'Entrez une psudo valide';
}
return null;
},
/* onSaved: (String value) {
name = value;
},*/
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _passwordController,
keyboardType: TextInputType.text,
obscureText: _isHidden,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "Mot de passe",
suffix: InkWell(
onTap: _togglePasswordView,
child: Icon(
_isHidden
? (CommunityMaterialIcons
.eye_outline)
: (CommunityMaterialIcons
.eye_off),
color: Color(0xFF939394))),
),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre mot de passe';
}
if (!RegExp(
"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$&*~]).{8,}")
.hasMatch(value)) {
return 'Entrez une mot de passe valide';
}
return null;
},
/* onSaved: (String value) {
name = value;
},*/
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _password_confirmationController,
keyboardType: TextInputType.text,
obscureText: _isHidden,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "Confirmer mot de passe",
suffix: InkWell(
onTap: _togglePasswordView,
child: Icon(
_isHidden
? (CommunityMaterialIcons
.eye_outline)
: (CommunityMaterialIcons
.eye_off),
color: Color(0xFF939394),
)),
),
validator: (String value) {
if (value.isEmpty) {
return 'Retapez mot de passe';
}
//   print(password.text);
//  print(confirmpassword.text);
if (_passwordController.text !=
_password_confirmationController.text) {
return "Mot de passe incorrect";
}
return null;
},
),
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400]))),
child: TextFormField(
controller: _adressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: " Adresse "),
validator: (String value) {
if (value.isEmpty) {
return 'Entrez votre adresse ';
}
return null;
},
/*  onSaved: (String value) {
name = value;
},*/
),
),
],
),
)),
//SizedBox(height: 40,),
FadeAnimation(
1.8,
Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: RaisedButton(
textColor: Colors.white,
color: kPrimaryColor,
child: Text("S'inscrire"),
onPressed: () {
if (_formKey.currentState.validate()) {
registerUser();
}
},
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(30.0),
),
),
width: 250,
padding: EdgeInsets.all(15),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AlreadyHaveAnAccountCheck(
login: false,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return LoginPage();

void _togglePasswordView() {
setState(() {
_isHidden = !_isHidden;
});
}
void registerUser() async {
// if (_formKey.currentState.validate()) {
setState(() {
isLoading = true;
});
String email = _emailController.text;
String password = _passwordController.text;
String name = _nameController.text;
String username = _usernameController.text;
String phone = _phoneController.text;
String adress = _adressController.text;
String password_confirmation = _password_confirmationController.text;
authentication
.register(name, email, phone, password, password_confirmation, username,
adress)
.then((user) {
if (user != null)
Navigator.push(
context, MaterialPageRoute(builder: (context) => LoginPage()));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
/* setState(() {
isLoading = false;
});*/
}).catchError((error) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(error.toString())));
});
setState(() {
isLoading = false;
});

有人知道怎么做吗？

Answer 1

您可以使用Future Builder并在future属性中设置Future Function(registerUser(。您可以根据功能的状态控制可见的小部件。所以您不必使用isloading变量。需要将registerUser更改为Future:

Future registerUser() async{
return authentication.register...
}

Answer 2

您可以使用现有的isLoading变量或创建另一个变量。最初将其设置为false，然后单击按钮，将其状态设置为true。

RaisedButton(
textColor: Colors.white,
color: kPrimaryColor,
child: isLoading ? circularProgressIndicator() : Text("S'inscrire"),
onPressed: () {
if (_formKey.currentState.validate()) {
registerUser();
},
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(30.0),
),
width: 250,
padding: EdgeInsets.all(15),
)

我希望它能帮助你！如果没有，就回应。

Answer 3

isLoading设置正确。现在你可以做以下

class LoadingExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: isLoading ? Center(child: CircularProgressIndicator()) :  //... your page content,
);
}
}

这将检查加载是否为真。如果为true，则返回CircularProgressIndicator，否则返回页面内容。