I am building a splash screen for my Flutter app, and I’m having trouble positioning text and branding elements responsively on the screen. Specifically, I want to:

1. Position my app logo text (“NewApp”) in the top-left corner.
2. Place the main branding (“SplashScreen”) centered on the screen.
3. Add a description text below the main branding, centered horizontally.

I tried using Column with padding, but the layout isn’t consistent across different screen sizes. I switched to using Stack and Positioned to gain better control over the positions, but I’m not sure if this is the most efficient way to handle responsive layouts.

this is code:

class _SplashscreenbrandingState extends State<Splashscreenbranding> {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Column(
      children: [
        Column(
          children: [
            Padding(
              padding: EdgeInsets.only(left: width * 0.20),
              child: Transform.translate(
                offset: const Offset(0, 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      "New",
                      style: GoogleFonts.bakbakOne(
                        textStyle: const TextStyle(
                          color: Color(0xFF273272),
                          fontSize: 8,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    Text(
                      "App",
                      style: GoogleFonts.bakbakOne(
                        textStyle: const TextStyle(
                          color: Color.fromARGB(255, 8, 6, 4),
                          fontSize: 8,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Transform.translate(
              offset: const Offset(0, -12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Splash",
                    style: GoogleFonts.bakbakOne(
                      textStyle: const TextStyle(
                        color: Color.fromARGB(255, 187, 9, 134),
                        fontSize: 35,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  Text(
                    "Screen",
                    style: GoogleFonts.bakbakOne(
                      textStyle: const TextStyle(
                        color: Color.fromARGB(255, 57, 8, 172),
                        fontSize: 35,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        Transform.translate(
          offset: const Offset(0, -15),
          child: Text(
              "Now your companies & employees are nin one place and always under control",
              style: GoogleFonts.inter(
                textStyle: TextStyle(
                  color: const Color(0xFF000000).withOpacity(0.7),
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                ),
              )),
        )
      ],
    );
  }

I expecting this:

Any suggestions or improvements on positioning widgets effectively would be much appreciated!