如何在 Flutter 中实现这种文本流

Question

在此处输入图像描述请您帮我如何在 Flutter 中构建这样的设计，实际上我构建了大部分，但问题是我不知道如何放置主要文本“咖啡这么好，你的味蕾一定会喜欢它。”正如您在照片中看到的那样，在主图像上。我尝试过 Stack 但它不起作用或者我没有正确使用它。请帮助我，我实际上对颤动布局有疑问，我认为它有点具有挑战性，所以有什么建议吗？

这是我的代码

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'))
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我尝试使用 Stack 来解决问题并定位文本，但它对我不起作用

Answer 1

从这里开始：

结果：

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'),
              )


            ],
          ),
        )
      ],
    );

希望对您有帮助。