Removing Border Outline in Flutter?

Viewed 848

I'm implementing a toggle widget and in an attempt to make the borders round, I now seem to have border outlines. I'm not quite sure how to disable them. enter image description here

As you can see, next to "Bug" you have the square corner outlines.

My code:

Container(
      height: 30,
      decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.3),
          borderRadius: BorderRadius.all(Radius.circular(20))),
      child: ToggleButtons(
        isSelected: isSelected,
        selectedColor: Colors.orange[600],
        color: Colors.black,
        fillColor: Colors.white,
        children: <Widget>[
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('Bug',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18))),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text('Improvement', style: TextStyle(fontSize: 18))),
        ]

Would appreciate some help, thanks in advance!

2 Answers

As per your requirement i have created a custom design please check and let me know if it works

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isItemSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: double.infinity,
          height: 40,
          margin: EdgeInsets.symmetric(horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.grey[350],
            borderRadius: BorderRadius.circular(10),
          ),
          child: Row(
            children: [
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _isItemSelected = !_isItemSelected;
                    });
                  },
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    height: 35,
                    decoration: BoxDecoration(
                      color:
                          _isItemSelected ? Colors.white : Colors.transparent,
                      borderRadius: BorderRadius.circular(5),
                      boxShadow: _isItemSelected
                          ? [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.5),
                                spreadRadius: 5,
                                blurRadius: 7,
                                offset:
                                    Offset(0, 3), // changes position of shadow
                              ),
                            ]
                          : null,
                    ),
                    child: Center(
                        child: Text(
                      'Bugs',
                      style: TextStyle(
                        color: _isItemSelected
                            ? Colors.orangeAccent
                            : Colors.blueGrey,
                      ),
                    )),
                  ),
                ),
              ),
              Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _isItemSelected = !_isItemSelected;
                    });
                  },
                  child: Container(
                    height: 35,
                    margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                    decoration: BoxDecoration(
                      color:
                          !_isItemSelected ? Colors.white : Colors.transparent,
                      borderRadius: BorderRadius.circular(5),
                      boxShadow: !_isItemSelected
                          ? [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.5),
                                spreadRadius: 5,
                                blurRadius: 7,
                                offset:
                                    Offset(0, 3), // changes position of shadow
                              ),
                            ]
                          : null,
                    ),
                    child: Center(
                        child: Text(
                      "Improvements",
                      style: TextStyle(
                        color: !_isItemSelected
                            ? Colors.orangeAccent
                            : Colors.blueGrey,
                      ),
                    )),
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    ));
  }
}



Let me know if it works.

Check the image that i have added.

decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.3),
          borderRadius: BorderRadius.all(Radius.circular(20))),

Remove that code from your Container

Related