Question 213506 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – incrementation of a variable without action

i’m using animatedSwitcher of flutter , to animate my list of widget , but the thing is i want to show the next widget of the list without pressing any button , like after a duration , but i couldn’t figure out how , so im seeking for any help here , this is my code


 Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          children: [
           
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 500),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return ScaleTransition(scale: animation, child: child);
              },
              child: Text(
                widget.aya[i].text,
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ));
Tags:

2

Answers


  1. 0

    You can you FutureBuilder and add your desired duration after that you want the next widget to show and return it.

    Like below code:

    class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.indigoAccent,
        body: FutureBuilder<Widget>(
          future: _futureFunction(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return snapshot.data ?? const SizedBox.shrink();
            }
            return Container(
              color: Colors.indigoAccent,
            );
          },
        ));
  }

  Future<Widget> _futureFunction() async {
    await Future.delayed(const Duration(seconds: 5));
    return Container(
      color: Colors.blueAccent,
    );
  }
}

    Here i’m returning FutureBuilder from scaffold body and passed a _futureFunction() whose returning a container after 5 seconds till that seconds a container with indigoAccent colour will be shown and after a container returned from function will be visible.

    This whole thing will be done without any action.

    But in basic application you can use the FutureBuilder cause it’s a simple solution but i don’t suggest using in the complex application cause the FutureBuilder build itself on every changing state, For that you should use state management tools like Bloc or Cubits.

    Login or Signup to reply.
  2. 0

    The simplest solution is to use a Timer.

      int currentIndex = 0;
  Timer? timer;

 @override
 void initState() {
   super.initState();
   // Start the timer to switch automatically every 2seconds
   timer = Timer.periodic(Duration(seconds: 3), (_) {
   setState(() {
       currentIndex = (currentIndex + 1) % widget.aya.length;
        });
   });
 }

    With this setup, the widgets will automatically switch every 3 seconds, providing the desired behavior without needing to press any buttons.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search