How to impose different constraints (height/width) on its child than it gets from its parent in Flutter?

This Article is posted by seven.srikanth at 11/22/2022 1:08:31 AM



Let's see how to impose different constraints on its child than it gets from its parent. 
Below is an example of how it looks.
You can achieve this in flutter using OverFlowBox widget. It is a widget that imposes different constraints (like height/width) on its child widget than it gets from its parent widget, possibly allowing the child to overflow the parent widget as shown above.
Here is the complete code from main.dart file for this example. 
 

import 'package:flutter/material.dart';
void main(List<String> args) {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @ override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyLayoutWidget(),
      ),
    );
  }
}
class MyLayoutWidget extends StatelessWidget {
  const MyLayoutWidget({
    super.key,
  });
  @ override
  Widget build(BuildContext context) {
    return Center(
      child: LayoutBuilder(
        builder: (p0, p1) {
          return Container(
            color: Colors.grey,
            height: p1.maxHeight / 2,
            width: p1.maxWidth / 2,
            child: OverflowBox(
              minHeight: 50,
              minWidth: 50,
              maxHeight: 200,
              maxWidth: 200,
              child: Container(
                color: Colors.green,
                height: 100,
                width: 100,
              ),
            ),
          );
        },
      ),
    );
  }
}
Thanks,
Srikanth

Tags: bigger than parent widget; make child widget grow beyond parent widget; Overflow parent widget;








0 Comments
Login to comment.
Recent Comments












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com