颤振中小部件的轮廓边框

Question

我想像这样给容器制作轮廓边框和标签

Answer 1

您可以这样做来模拟此设计。它看起来有点复杂，但我找不到其他方法来做到这一点。希望它对你有用。只需确保容器底部和顶部的颜色与代码相同即可。只需调用此 MyMenuContent class 即可查看此输出。

class MyMenuContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: MediaQuery.of(context).size.height / 2,
          padding: EdgeInsets.all(10),
          child: Stack(
            children: [
              Positioned(
                top: 50,
                child: Container(
                  height: MediaQuery.of(context).size.height / 12,
              width: MediaQuery.of(context).size.width / 2,
              decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(12),
                color: Colors.white,
                border: Border.all(
                  color: Colors.black,
                  width: 1,
                    ),
              ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.calendar_today),
                  SizedBox(width: 10),
                  //Text
                  Text(
                    '16-12-2020',
                        style: TextStyle(
                        fontSize: 17, fontWeight: FontWeight.w500),
                  )
                    ],
                  ),
                ),
              ),
              Positioned(
            // top: 40,left: 80,
            top: MediaQuery.of(context).size.width / 9.5,
            left: MediaQuery.of(context).size.height / 7,

                child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Center(
                      child: Text(
                "outline",
                style: TextStyle(fontSize: 15),
              )),
            ),
          )
        ],
      ),
    ),
  ),
    );
}
}

颤振中小部件的轮廓边框

Outline border to widget in flutter

containers

label

border

flutter