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

Flutter – How to make text slowly slide to the left when making other text visible in a row?

Is there a way to make the "chapter" text slowly move to the left, like in an animation, when clicking the floatingActionButton in the code below?

class _MyHomePageState extends State<MyHomePage> {
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Demo Home Page'),
        centerTitle: true,
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Chapter ',
              style: TextStyle(fontSize: 22),
            ),
            Visibility(
              visible: visible,
              maintainAnimation: true,
              maintainState: true,
              child: AnimatedOpacity(
                opacity: visible ? 1 : 0,
                duration: const Duration(milliseconds: 500),
                child: const Text(
                  '01',
                  style: TextStyle(fontSize: 22),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(
            () => visible = !visible,
          );
        },
      ),
    );
  }
}

I would like the "chapter" text to move in the same duration applied in the AnimatedOpacity Widget.

Tags:

3

Answers


  1. 0

    You can implement your own custom animation or use a package like:

    animate_do

    After just wrap your widget with SlideInLeft and customize the duration of the animation, with the property animate you can specify when launch your animation.

    Login or Signup to reply.
  2. 0

    You can use animated_text_kit Package

    SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
  fontSize: 30.0,
  fontFamily: 'Bobbers',
),
child: AnimatedTextKit(
  animatedTexts: [
    TyperAnimatedText('It is not enough to do your best,'),
    TyperAnimatedText('you must know what to do,'),
    TyperAnimatedText('and then do your best'),
    TyperAnimatedText('- W.Edwards Deming'),
  ],
  onTap: () {
    print("Tap Event");
  },
 ),
),
);
    Login or Signup to reply.
  3. 0

    To make the "Chapter" text slowly move to the left when clicking the FloatingActionButton, you can wrap the "Chapter" text with an AnimatedPositioned widget. Here’s the updated code:

    class _MyHomePageState extends State<MyHomePage> {
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Demo Home Page'),
        centerTitle: true,
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedPositioned(
              duration: const Duration(milliseconds: 500),
              left: visible ? 0 : -100, // Adjust the initial position of the "Chapter" text
              child: const Text(
                'Chapter ',
                style: TextStyle(fontSize: 22),
              ),
            ),
            Visibility(
              visible: visible,
              maintainAnimation: true,
              maintainState: true,
              child: AnimatedOpacity(
                opacity: visible ? 1 : 0,
                duration: const Duration(milliseconds: 500),
                child: const Text(
                  '01',
                  style: TextStyle(fontSize: 22),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() => visible = !visible);
        },
      ),
    );
  }
}

    In this updated code, the "Chapter" text will slowly move to the left when the FloatingActionButton is clicked, thanks to the AnimatedPositioned widget. You can adjust the left value in the AnimatedPositioned widget to control the initial position of the "Chapter" text before it animates to the final position.

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

Back To Top
Search