I have the current_widget variable to switch pages A and B by setState, and I used the rounded_loading_button on these pages. When I press the rounded_button in the A page and I switch to the B page, the rounded_button on the B page is animating like page A. How to separate animation of these buttons.
You can duplicate this issue by:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rounded_loading_button/rounded_loading_button.dart';
class test extends StatefulWidget {
const test({Key? key}) : super(key: key);
@OverRide
_testState createState() => _testState();
}
class _testState extends State {
Widget currentSection = SizedBox();
bool current = true;
@OverRide
void initState() {
setState(() {
currentSection = pageA();
});
super.initState();
}
void doSomething(RoundedLoadingButtonController btnController) async {
Timer(
Duration(milliseconds: 500),
() {
btnController.success();
},
);
Timer(
Duration(seconds: 2),
() {
btnController.reset();
},
);
}
@OverRide
Widget build(BuildContext context) {
return Column(
children: [
IconButton(
onPressed: () {
setState(() {
if (current) {
currentSection = pageB();
current = !current;
} else {
currentSection = pageA();
current = !current;
}
});
},
icon: Icon(Icons.swipe),
),
currentSection,
],
);
}
Widget pageA() {
final RoundedLoadingButtonController btnControllerA =
new RoundedLoadingButtonController();
return Column(
children: [
Text("Page A"),
RoundedLoadingButton(
controller: btnControllerA,
onPressed: () => doSomething(btnControllerA),
child: Text('BTN A'),
),
],
);
}
Widget pageB() {
final RoundedLoadingButtonController btnControllerB =
new RoundedLoadingButtonController();
return Column(
children: [
Text("Page B"),
RoundedLoadingButton(
controller: btnControllerB,
onPressed: () => doSomething(btnControllerB),
child: Text('BTN B'),
),
],
);
}
}
Or simple code like
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rounded_loading_button/rounded_loading_button.dart';
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
@OverRide
_testState createState() => _testState();
}
class _testState extends State {
bool current = true;
void doSomething(RoundedLoadingButtonController btnController) async {
Timer(
Duration(milliseconds: 500),
() {
btnController.success();
},
);
Timer(
Duration(seconds: 2),
() {
btnController.reset();
},
);
}
@OverRide
Widget build(BuildContext context) {
return Column(
children: [
IconButton(
onPressed: () {
setState(() {
if (current) {
current = !current;
} else {
current = !current;
}
});
},
icon: Icon(Icons.swipe),
),
current ? pageA() : pageB(),
],
);
}
Widget pageA() {
final RoundedLoadingButtonController btnControllerA =
new RoundedLoadingButtonController();
return Column(
children: [
Text("Page A"),
RoundedLoadingButton(
controller: btnControllerA,
onPressed: () => doSomething(btnControllerA),
child: Text('BTN A'),
),
],
);
}
Widget pageB() {
final RoundedLoadingButtonController btnControllerB =
new RoundedLoadingButtonController();
return Column(
children: [
Text("Page B"),
RoundedLoadingButton(
controller: btnControllerB,
onPressed: () => doSomething(btnControllerB),
child: Text('BTN B'),
),
],
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent