Question 216461 in Flutter Question posted in
The official Flutter documentation can be found here.

how to make single borderline for a container and for its child container in flutter

Am trying to make two container with border line but when I implemented the parent border line and child container line is not drawing on the same line please refer this pic [![enter image description here][1]][1]

Following is the code

    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white70,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Colors.red,
                ),
              ),
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: Row(children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.white70,
                  border: Border.fromBorderSide(
                    BorderSide(
                      color: Colors.red,
                    ),
                  ),
                  borderRadius: const BorderRadius.all(Radius.circular(8)),
                ),
                child: Expanded(
                    child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text('data1'),
                )),
              )
            ]),
          ),
        ));
  }

Any help , thanks in advance.
[1]: https://phpout.com/wp-content/uploads/2023/07/TAuwh.png

Tags:

2

Answers


  1. 0

    try below code :

    Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Data"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white70,
            border: Border.fromBorderSide(
              BorderSide(
                color: Colors.red,
              ),
            ),
            borderRadius: const BorderRadius.all(Radius.circular(8)),
          ),
          child: Row(children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white70,
                border: Border(
                  right: BorderSide(
                    color: Colors.red,
                    width: 1.0,
                  ),
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text('data1'),
              ),
            )
          ]),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    you can use stack to implementation.
    like this code

          Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.red, width: 1)
            ),
          ),
          Container(
            height: 40,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.red, width: 1)
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('date'),
              ],
            ),
          )
        ]
      )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search