remove border in background in flutter

userVrCe1 0
Viewed 28

I'm confused how to make the colored border cut off, when I meet the word "Month", I tried with BoxDecoration(color: Colors.transparent), but it doesn't produce anything, the border still doesn't get cut.

like the following :

enter image description here

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
      body: Container(
    decoration: BoxDecoration(color: Colors.blue),
    child: Center(
      child: Container(
        width: 120,
        height: 110,
        decoration: BoxDecoration(color: Colors.pink),
        child: Stack(
          children: [
            Positioned(
              bottom: 0,
              child: Container(
                height: 55,
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  border: Border.all(width: 2, color: Colors.white),
                ),
              ),
            ),
            Positioned(
              left: (120 - 50) / 2,
              top: 45,
              child: Container(
                width: 50,
                height: 15,
                decoration:
                    BoxDecoration(color: Colors.black.withOpacity(0.1)),
                child: Center(
                  child: Text("Month"),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  )),
);}}

I want a look like this: enter image description here

Please for the guidance, Thank you

border circular-dependency flutter
2 Answers

A sample quick trick to have the effect you want is to set the background color for your positioned text as the same as your pink container:

child: Container(
                width: 50,
                height: 15,
                padding: const EdgeInsets.all(5.0) <- with this too
                decoration:
                    BoxDecoration(color: Colors.pink,), <- here
                child: Center(
                  child: Text("Month"),
                ),
Tnd0

try this

Scaffold(
  body: Stack(
      children: <Widget>[
        Container(
          width: double.infinity,
          height: 200,
          margin: EdgeInsets.fromLTRB(20, 20, 20, 10),
          padding: EdgeInsets.only(bottom: 10),
          decoration: BoxDecoration(
           color: Colors.green,
          border: Border.all(width: 2, color: Colors.white),
            borderRadius: BorderRadius.circular(15),
            shape: BoxShape.rectangle,
          ),
        ),
        Positioned(
          left: 100,
          top: 12,
          child: Container(
           padding: EdgeInsets.only(bottom: 10, left: 10, right: 10),
           color: Colors.black.withOpacity(0.1),
           child: Text(
                'Month',
              ),
          ),
        ),
      ],
    ),

)
brook yonas0
Related