CODEWITHSUNDEEP
flutterflutter-layout
sujan basnet
sujan basnet

Reputation: 300

Flutter App - Unnecessary line between containers

I have a setup where I have used columns, containers and expanded widgets. There's a line between two containers. I am not sure why and which widget is generating that line. I tried providing decoration for container with 0 border to see if there was default border definition but that wasn't the case.

class GalleryImage extends StatelessWidget {

  final String tag;
  final ImageProvider image;

  GalleryImage(this.tag, this.image);

  @override
  Widget build(BuildContext context) {

    return Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(0.0),
          child: Column(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  border: Border.all(color:Colors.white, width:0.0, style:BorderStyle.none),
                  color: Colors.white,
                ),
                child: Hero(
                  tag: tag,
                  child: Image(
                    image: image,
                  ),
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  border: Border.all(color:Colors.white, width:0.0, style:BorderStyle.none),
                  color: Colors.white,
                ),
                width: double.infinity,
                padding: EdgeInsets.fromLTRB(10.0, 15.0, 15.0, 15.0),                 
                child:Text(
                  "Beautiful Nepal",
                  style: Theme.of(context).textTheme.headline,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.white,
                  padding: EdgeInsets.fromLTRB(10.0, 5.0, 5.0, 0.0),                 
                  child:Text(
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada varius viverra. Proin malesuada id nisl a ultricies.",
                    style: Theme.of(context).textTheme.body1,
                  ),
                )
              ),
            ],
          )
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
          ),
        ),
      ],
    );

  }

}

Here is a screen shot

Here is the project repo

Upvotes: 1

Views: 958

Answers (2)

chunhunghan
chunhunghan

Reputation: 54377

enter image description herePlease change 

style: Theme.of(context).textTheme.headline

to

style: Theme.of(context).textTheme.title

or something like 

style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40.0, fontFamily: 'Open Sans',)

Upvotes: 0

Durdu
Durdu

Reputation: 4849

I haven't used an image but a yellow container to test your code.

I don't have a separator, here is how it looks:

enter image description here

What I would recommend is to try and use the Flutter inspector and Select widget mode:

enter image description here And then try to tap on that widget:

enter image description here

It should be able to highlight the widget that is causing this behaviour and help you to further investigate.

Upvotes: 1

Related Questions