2

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 2

1

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.

Sign up to request clarification or add additional context in comments.

9 Comments

which bar you are taking about, did not get you. can you elaborate
Can you show the parent widget of this container what you using this in row or column, and i have made some more changes for the border add this line disabledBorderColor: Colors.transparent,
check the edit that i have made, is this what you are accepting
hey @someJoe121 i see you can do this in simple manner, there is no need for the Toggle button i have created an example for this one let me know if this is what you are looking for.
Glad it worked for you, have a nice day happy coding.
|
0
decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.3),
          borderRadius: BorderRadius.all(Radius.circular(20))),

Remove that code from your Container

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.