flutter TweenAnimationBuilder is not working

Question

I want to run a tag animation horizontal one time only when user want to see detail of product there is a Tag of sale but nothing happen. I've looked all solutions but couldn't solve myself.

This is the GIF,

and this is image of stack I want to move like in gif a line is moving

return SafeArea(
  child: Scaffold(
    backgroundColor: fBackgroundColor,
    appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: subAppBarMain(context)),
    body: Column(
      children: [
        Expanded(
          child: ListView(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(
                    horizontal: 10.0, vertical: 10.0),
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: 10.0,
                      ),
                      Center(
                        child: Image.asset(
                          widget.listModel.image!,
                        ),
                      ),
                      TweenAnimationBuilder(
                          tween: Tween<double>(
                              begin: 0.0,
                              end: MediaQuery.of(context).size.width),
                          duration: const Duration(milliseconds: 4000),
                          builder: (context, double i, _) {
                            return Stack(
                              children: [
                                SizedBox(
                                  height: 20,
                                  width: 115,
                                  child: CustomPaint(
                                    painter: PriceTagPaint(),
                                    child: Center(
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            right: 16.0),
                                        child: Align(
                                          alignment: Alignment.centerRight,
                                          child: Text(
                                            widget.listModel.sale!,
                                            textAlign: TextAlign.center,
                                            style: const TextStyle(
                                                fontSize: 10,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.white),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 50,
                                  height: 20,
                                  color: Colors.black,
                                  child: const Center(
                                    child: Text(
                                      "SALE",
                                      style: TextStyle(
                                          fontSize: 10,
                                          fontWeight: FontWeight.w500,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ],
                            );
                          }),
                      SizedBox(
                        height: 20,
                        width: 65,
                        child: CustomPaint(
                          painter: ExpressPaint(),
                          child: Center(
                            child: Text(
                              widget.listModel.express!,
                              style: const TextStyle(
                                  fontSize: 10,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black),
                            ),
                          ),
                        ),
                      ),

Where I'm making mistake?

I want to move container which is in stack. Container should move from start to end — , Jan 18 '22 at 14:58
will you put a gif of the animation results. also use a position widget to move a stack of other widgets — Golden Lion, Jan 18 '22 at 15:14
the arrow can easily be animated using an position widget and stack — Golden Lion, Jan 19 '22 at 15:10

Md. Yeasin Sheikh · Answer 1 · 2022-01-19T17:54:51.210

0

You can use Tween<Alignment> and use it on Stack

SizedBox(
  width: double.maxFinite,
  child: TweenAnimationBuilder(
      tween: Tween<Alignment>(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight),
      duration:
          const Duration(milliseconds: 4000),
      builder: (context, Alignment i, _) {
        return Stack(
          alignment: i,
          children: [

edited Jan 19 '22 at 17:54

answered Jan 18 '22 at 15:12

Md. Yeasin Sheikh

54,221
7
29
56

oh sorry my mistake , I want to move whole this `Stack`. – Jan 18 '22 at 19:10
Wrap with another stack and provide `Positioned` like this – Md. Yeasin Sheikh Jan 18 '22 at 19:19
I've updated my question.. – Jan 18 '22 at 19:29
what's the parent of `TweenAnimationBuilder`, can you include full widget that will reproduce the same issue – Md. Yeasin Sheikh Jan 19 '22 at 08:40
`TweenAnimationBuilder` itself is parent, in updated question there is a link of tutorial in which a line animate from start that's how I want to move that tag. – Jan 19 '22 at 14:15
Can you include exact output gif – Md. Yeasin Sheikh Jan 19 '22 at 14:23
ok let me try to put gif – Jan 19 '22 at 14:29
Please check now updated question. – Jan 19 '22 at 15:00
Can you update the code-snippet with scaffold – Md. Yeasin Sheikh Jan 19 '22 at 16:34
I've updated code – Jan 19 '22 at 17:22
You like to animate left to right as Column item or full screen top to bottom? – Md. Yeasin Sheikh Jan 19 '22 at 17:27
Column item animate left to right – Jan 19 '22 at 17:38
Answer updated , – Md. Yeasin Sheikh Jan 19 '22 at 17:55
whole stack is moving now, also `text sale` is moving from left to right position, I just want this whole stack come from card like in GIF and end on its original width size. – Jan 19 '22 at 18:34
play with sizedBox above `TweenAnimationBuilder`, Sorry, your question is not clear to me, – Md. Yeasin Sheikh Jan 19 '22 at 18:41
I've already tried it. – Jan 20 '22 at 12:30
Hi @Yeasin sheikh, kindly respond on [link](https://stackoverflow.com/questions/71516645/slider-switch-in-Flutter) it. I need it urgently please. – Mar 18 '22 at 03:55

flutter TweenAnimationBuilder is not working

1 Answers1