CODEWITHSUNDEEP
flutterdart
Rukshan
Rukshan

Reputation: 133

Flutter - When add border radius border disappear

I am new to flutter and I am trying to make a dynamic icon button. for that I add following decoration 

      Container(
        margin: const EdgeInsets.only(left: 45.0),
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 2.0, color: AppColors.primaryColor),
            bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
            right: BorderSide(width: 2.0, color: AppColors.primaryColor)
          ),
          borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
        ),
        child: Center(
          child: Text(
            this.iconText,
            style: TextStyle(color: AppColors.primaryTextColor),
          ),
        ),
      ),

But when I add this 'borderRadius' border disappear and when I comment 'borderRadius' border appear. Could I know the reason for that? and How can I use borderRadius without border disappe

Upvotes: 2

Views: 2684

Answers (1)

Aamil Silawat
Aamil Silawat

Reputation: 8229

You have to Add Border from all side

  Container(
        margin: const EdgeInsets.only(left: 45.0),
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(width: 2.0, color: AppColors.primaryColor),
            bottom: BorderSide(width: 2.0, color: AppColors.primaryColor),
            right: BorderSide(width: 2.0, color: AppColors.primaryColor),
             left: BorderSide(width: 2.0, color: AppColors.primaryColor)
          ),
          borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
        ),
        child: Center(
          child: Text(
            this.iconText,
            style: TextStyle(color: AppColors.primaryTextColor),
          ),
        ),
      ),

Or this 

Container(
            margin: const EdgeInsets.only(left: 45.0),
            width: 150,
            height: 50,
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Theme.of(context).primaryColor),
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12.0)),
            ),
            child: Center(
              child: Text(
                this.iconText,
                style: TextStyle(color: AppColors.primaryTextColor), //Whatever color you want 
              ),
            ),
          ),

Upvotes: 5

Related Questions