how to achieve this text flows in Flutter

AliJabowr
May 6, 2024
241 views
0 votes
2 Answers

enter image description hereplease can you help me how can I build such a design in Flutter, I actually build the most of it, but the problem is I don’t know how to place the main text "Coffee so good, your taste buds will love it." over the main image as you see here in the photo. I tried Stack but it doesn’t work or I didn’t use it properly. please help me in this, I actually have a problem with flutter layouts I see it a little bit challenging, so any advices ?

and here is my code

class OnBoardingScreen extends StatelessWidget {
  const OnBoardingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Image(
            width: MediaQuery.of(context).size.width,
            image: const AssetImage(TImages.onBoardingImage1),
            fit: BoxFit.fill,
          ),
          Expanded(
            child: Container(
              width: THelperFunctions.screenWidth(),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: [
                      Colors.black.withOpacity(1),
                      Colors.black.withOpacity(0.95),
                    ]),
              ),
              child: Column(
                children: [
                  const Text(
                    'Coffee so good, your taste buds will love it.',
                    style: TextStyle(
                      color: TColors.textWhite,
                      fontSize: 34,
                      fontWeight: FontWeight.w500,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const Text('sub text'),
                  ElevatedButton(onPressed: () {}, child: const Text('click'))
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I tried to use Stack to solve the problem and position the text but it didn’t work with me

Tags: flutter flutter-design

Answers

Start from here:

Result :

Stack(
      fit: StackFit.expand,
      children: [
        DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.black, Colors.transparent],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
            ),
          ),
          child: Image.network('https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?', fit: BoxFit.cover,),
        ),
        Container(
          width: double.infinity,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              Expanded(child: SizedBox.shrink()), // top part keep it empty
              Text('Coffe is so good, drink it boiled', style: Theme.of(context).textTheme.titleMedium?.copyWith(
                color: Colors.white
              ),),
              Text('Drink it now', style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                color: Colors.grey,
              ),),
              FilledButton(
                onPressed: (){},
                child: Text('Get Started'),
              )


            ],
          ),
        )
      ],
    );

The full design :


class OnBoardingScreen extends StatelessWidget {
  const OnBoardingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: SizedBox(
              width: double.infinity,
              height: context.screenHeight * .7,
              child: Image.asset(
                "asstes/images/app_images/profile/pexels-chevanon-312418.jpg",
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: context.screenHeight * .6,
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.black.withOpacity(0.1),
                    Colors.black,
                    Colors.black,
                    Colors.black,
                    Colors.black,
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            top: context.screenHeight * .58,
            right: 0,
            left: 0,
            child: Column(
              children: [
                const Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 20.0,
                  ),
                  child: Text(
                    'Coffee so good, your taste buds will love it.',
                    style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.w500,
                      fontFamily: FontFamily.mainFont,
                      color: Colors.white,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                const Text(
                  'The bset grain, the finst roast, the powerfull flavour',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 16,
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                SizedBox(
                  width: context.screenWidth * .8,
                  height: context.screenHeight * .07,
                  child: MaterialButton(
                    onPressed: () {},
                    color: const Color(0xFFECB159),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: const Text(
                      "CLICK",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.