CODEWITHSUNDEEP
flutterdartcontainers
Arnau Bosch
Arnau Bosch

Reputation: 83

Flutter Corner Radius with transparent not working

Below is my code. I want to render a round-container container with transparent backgroud:

I have added to the parent Colors.tranpsarent but I am getting the background white.

void _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return Container(
          color: Colors.transparent,
          child: new Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(253, 126, 118, 1),
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30)
                ),
              ),
              child: new Wrap(
                children: <Widget>[
                  ..._alerts.map((alert) {
                    return ListTile(
                        title: new Text(
                          alert.title,
                          style: TextStyle(
                              color: Colors.white, 
                              fontSize: 20
                          ),
                        ),
                    );
                  }
                )
              ],
            )
          )
        );
      }
    );
  }

Upvotes: 0

Views: 696

Answers (1)

Ayad
Ayad

Reputation: 691

You should use the backgroundColor of the showModalBottomSheet.

showModalBottomSheet(
                    context: context,
                    backgroundColor: Colors.transparent,
                    builder: (BuildContext bc) {
                             return new Container(
                                      decoration: BoxDecoration(
                                        color: Color.fromRGBO(253, 126, 118, 1),
                                        borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(30),
                                            topRight: Radius.circular(30)
                                        ),
                                      ),
                                      child: Text(
                                        'ok',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 20
                                        ),
                                      )
                                  );
                                }
                            );

Upvotes: 1

Related Questions