flutter 我想设计成这样在扑,但不能设计,因为新的扑?

cbwuti44  于 2023-06-30  发布在  Flutter
关注(0)|答案(2)|浏览(141)

reference image

Container(
              child: Column(
                children: [
                  Container(
                    height: 200.00,
                    width: 180.00,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(10),
                        ),
                        color: Color.fromRGBO(30, 41, 59, 1.000)),
                  ),
                ],
              ),
            ),
wfypjpf4

wfypjpf41#

我得到了你的兄弟,试试这个模板我为你做的,我知道它可以很难做这种东西在Flutter当你知道很少,看看它

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

 @override
 Widget build(BuildContext context) {
  return const Scaffold(
   body: Center(
     child: MyCustomCard(),
   ),
 );
 }
 }

 class MyCustomCard extends StatelessWidget {
 const MyCustomCard({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return SizedBox(
  width: 150,
  height: 250,
  child: Stack(
    children: [
      buildBackground(),
      buildForeground(),
    ],
  ),
  );
  }

  Widget buildForeground() {
  return Padding(
  padding: const EdgeInsets.all(8.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text("Header"),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              height: 100,
              padding: const EdgeInsets.all(5),
              decoration: const BoxDecoration(
                borderRadius: 
       BorderRadius.all(Radius.circular(5)),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black38,
                    blurRadius: 5,
                    spreadRadius: 5,
                  )
                ],
              ),
              child: const Text("Card Text"),
            ),
          ),
          Container(
            width: 20,
            height: 20,
            margin: const EdgeInsets.only(left: 5, top: 23),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.blue,
            ),
            child: const Center(child: Text("S")),
          )
        ],
      ),
      const Spacer(),
      const Text("Background"),
    ],
  ),
);

}
Column buildBackground(){ return Column(children:[扩展(flex:1、子:集装箱(装饰: Package 盒装饰(颜色:颜色.purple,borderRadius:BorderRadius.only(topLeft:getRadius(),topRight:getRadius(),),),),),Expanded(flex:3、子:集装箱(装饰: Package 盒装饰(颜色:颜色.白色,边界半径:BorderRadius.only(bottomLeft:getRadius(),bottomRight:getRadius(),),),),),],);}
String getString()=> String. String();}

zvms9eto

zvms9eto2#

你需要一些容器在一个堆栈小部件。要在容器内部创建距离,您可以使用填充小部件。

相关问题