如何在 flutter 中制作这张卡片设计答案

【问题标题】：how to make this card design in flutter如何在 flutter 中制作这张卡片设计
【发布时间】：2023-01-11 18:25:34
【问题描述】：

作为filter的初学者，很多设计实现起来还是比较困难的，在网上学习，但是这个设计找了半天也没有找到类似的例子。我希望我能在制作这个设计时找到帮助

【问题讨论】：

你想要显示绿色文字的卡片吗？

【解决方案1】：

请试试这个：

class MyApp11 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Demo(),
    );
  }
}



class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          // background image and bottom contents
          Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height / 3,
                color: Colors.orange,
                child: const Center(
                  child: Text('Background image goes here'),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.white,
                  child: const Center(
                    child: Text('Content goes here'),
                  ),
                ),
              )
            ],
          ),
          // Profile image
          Positioned(
            top: 220.0, // (background container size) - (circle height / 2)
            child: Container(
              height: 100.0,
              width: 200.0,
              decoration: const BoxDecoration(color: Colors.red),
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：