CODEWITHSUNDEEP
flutter
dakiesse
dakiesse

Reputation: 562

How to extend the full width of the child in Flutter?

I have a next markup:

enter image description here

The red block is ListView with a horizontal orientation. The purple block is just Container for all content. The white is Container as well but with paddings.

I want to expand the width of the red block on full width. How can I do it? It should look like this:

enter image description here

Code of the markup:

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
          horizontal: 30.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Container(
          color: Colors.purple,
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Math Reports"),
              Container(
                color: Colors.red,
                padding: EdgeInsets.symmetric(vertical: 10.0),
                height: 170.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  // children: renderItems(), // the example of code without green blocks
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 7264

Answers (1)

Phuc Tran
Phuc Tran

Reputation: 8073

You can use Stack as below

class FifaApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 60.0,
        ),
        color: Color(0xFFffffff),
        alignment: Alignment.topLeft,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.purple,
              margin: EdgeInsets.symmetric(horizontal: 30),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 30.0),
              child: Text(
                "Math Reports",
                style: TextStyle(color: Colors.white),
              ),
            ),
            Container(
              height: 170,
              color: Colors.red,
              margin: EdgeInsets.only(top: 30),
              child: ListView(
                scrollDirection: Axis.horizontal,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions