flutter 中小部件的轮廓边框

Question

I want to make outline border and label to container like this

Answer 1

You can do this for simulate this design. It looks little bit of complicate but I can't find other way to do this. Hope that it will work for you. Just make sure the bottom and the top container colors are same as the code. Just call this MyMenuContent class to see this output.

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