I am trying to achieve the following result in one of my app in flutter. But I cannot figure out how to animate the "SKYGOAL" text that comes fading and sliding. I've animated the rest of the components using AnimatedContainer or AnimatedOpacity, but I've been stuck on this one. I am new to animations so I don't know much. Any help would be useful. Thank you!

My current related snippet is :

class SplashScreen1 extends StatefulWidget {
  const SplashScreen1({Key? key}) : super(key: key);

  @override
  State<SplashScreen1> createState() => _SplashScreen1State();
}

class _SplashScreen1State extends State<SplashScreen1> with SingleTickerProviderStateMixin {
  double _skygoalLogoOpacity = 0;
  double _syjOpacity = 0;
  double _skygoalTextWidth = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Future.delayed(const Duration(seconds: 0)).then((value) => setState(() {
      _skygoalLogoOpacity = 1;
      _syjOpacity = 1;
      _skygoalTextWidth = 2000;
    }));
    Future.delayed(const Duration(milliseconds: 4800)).then((value) => Navigator.pushReplacement(context, AnimatedPageRoute(SplashScreen2())));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color(0xFF0E3C6E),
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(height: 250,),
            Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white
                  ),
                  height: 185,
                  width: 185,
                ),
                AnimatedOpacity(
                  duration: const Duration(milliseconds: 1000),
                  opacity: _skygoalLogoOpacity,
                  child: Container(
                    padding: EdgeInsets.only(top: 20),
                    child: Image.asset("assets/images/skygoal-logo.png"),
                    // height: 135,
                    width: 164,
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                AnimatedOpacity(
                  duration: const Duration(milliseconds: 2000),
                  opacity: _syjOpacity,
                  child: Container(
                    margin: EdgeInsets.only(left: 40, top: 37),
                    height: 29,
                    width: 153,
                    child: Image.asset("assets/images/start-your-journey.png"),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 5,left: 20),
                  child: Text(
                    "SKYGOAL",
                    style: GoogleFonts.poppins(
                      fontSize: 30,
                      fontWeight: FontWeight.w800,
                      color: Colors.white
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),

              ],
            ),
            Spacer(),
            Text(
              "By Skygoal",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 13
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10)
              ),
              height: 5,
              width: 134,
            )
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You can try animated_text_kit fade transition.

Example from doc

return SizedBox(
  width: 250.0,
  child: DefaultTextStyle(
    style: const TextStyle(
      fontSize: 32.0,
      fontWeight: FontWeight.bold,
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        FadeAnimatedText( "SKYGOAL"),
      ],
      onTap: () {
        print("Tap Event");
      },
    ),
  ),
);

CodePudding user response：

I dont know whether it is the correct solution or not, But you can try something like this . I created a stack and its first child is the text and the other child is a container with boxShadow . Have a look at this.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQueryData = MediaQuery.of(context);

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: mediaQueryData.size.width,
              width: mediaQueryData.size.width,
              child: ColoredBox(
                color: Colors.yellowAccent,
                child: Stack(
                  alignment: Alignment.centerRight,
                  children: [
                    Container(
                      width: mediaQueryData.size.width,
                      height: 80,
                      alignment: Alignment.center,
                      child: Text(
                        'Hello World',
                        style: TextStyle(
                          fontSize: mediaQueryData.textScaleFactor * 50,
                        ),
                      ),
                    ),
                    TweenAnimationBuilder(
                        tween: Tween<double>(
                          end: 0,
                          begin: 1,
                        ),
                        duration: const Duration(
                          seconds: 5,
                        ),
                        builder: (context, double tween, _ ){
                          return Container(
                            //alignment: Alignment.centerRight,
                            height: 50, //mediaQueryData.size.width,
                            width: mediaQueryData.size.width * tween,
                            decoration: const BoxDecoration(
                              color: Colors.yellowAccent,
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 80,
                                  spreadRadius: 30,
                                  color: Colors.yellowAccent,
                                ),
                              ]
                            ),
                          );
                        },
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}