Wes
Wes

Reputation: 47

How to extend flutter widget all the way to the left of a row?

In the picture above I have a piece of gray at the left of my row but I want the white to go all the way to the left. How would I do this?

enter image description here

I am trying to get to something like this

enter image description here

This is the relevant code

Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(15)),
                color: Colors.grey,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Expanded(
                    child: MaterialButton(
                      onPressed: () {},
                      child: Container(
                        height: 60,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                          color: Colors.white,
                        ),
                        child: Center(
                          child: Text(
                            'Test 1',
                            style: TextStyle(
                              color: Color(0xFF3d3636),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: MaterialButton(
                      onPressed: () {},
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(15)),
                          color: Colors.grey,
                        ),
                        child: Center(
                          child: Text(
                            'test 2',
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),

Thanks for any help.

Upvotes: 0

Views: 75

Answers (1)

Naveen Avidi
Naveen Avidi

Reputation: 3073

int active = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
            color: Colors.black),
        padding: const EdgeInsets.all(10),
        child: Row(children: [
          Expanded(
              child: TextButton(
                  onPressed: () {
                    setState(() {
                      active = 0;
                    });
                  },
                  style: TextButton.styleFrom(
                      backgroundColor:
                          active == 0 ? Colors.white : Colors.black54,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(7),
                      )),
                  child: Text('Register',
                      style: TextStyle(
                        color: active == 0 ? Colors.black : Colors.white,
                      )))),
          Expanded(
              child: TextButton(
                  onPressed: () {
                    setState(() {
                      active = 1;
                    });
                  },
                  style: TextButton.styleFrom(
                      backgroundColor:
                          active == 1 ? Colors.white : Colors.black54,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(7),
                      )),
                  child: Text('Sign in',
                      style: TextStyle(
                        color: active == 1 ? Colors.black : Colors.white,
                      ))))
        ]));
  }

enter image description here

Adjust border radius (s) to your requirement !

Upvotes: 1

Related Questions