CODEWITHSUNDEEP
flutterwidget
Trần Đức Tâm
Trần Đức Tâm

Reputation: 4453

How to make Widget small as its parent allows in Flutter?

I want to create a Widget with the same layout as bellow.

+===================+ => A not fixed height widget
|  ---------------  |
| |               | |
| |               | | => Image()
|  ---------------  |
|  ~~~~~~~~~        | => Text()
|  ~~~~~~~~~~~~~    | => Text()
+===================+

How could I make the Image Widget small as its parent allows in Flutter? I also as much as possible if I have a big parent Widget, also.

Upvotes: 2

Views: 1674

Answers (1)

Kavin-K
Kavin-K

Reputation: 2117

Expanded inside the Column would do the trick you wanted. You can change height and width of the Container. Expanded flex will fill the percentage of the parent height.

import 'package:flutter/material.dart';

class Question5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.grey.shade300,
        width: MediaQuery.of(context).size.width, //you can change width here
        height: MediaQuery.of(context).size.height, //you can change height here
        child: Column(
          children: <Widget>[
            Expanded(
              child: Image.network(
                'https://www.visioncritical.com/hubfs/Imported_Blog_Media/BLG_Andrew-G_-River-Sample_09_13_12.png',
                fit: BoxFit.cover,
              ),
            ),
            Text(
              'Some title here',
              style: TextStyle(
                fontSize: 25.0,
              ),
            ),
            Text(
              'Some subtitle here',
              style: TextStyle(
                fontSize: 15.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions