'Match child height size in a Navigator widget

I had a problem with the Navigator widget: I need to match the child widget height.

My Navigator widget is inside an Expanded widget but when I change route to a child widget with a different size, it doesn't work: the Navigator size is the same...

Here is a full example to be more clear & to test quickly :)

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> _navigationKey = GlobalKey();

  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Container(
              color: Colors.blue,
              height: 100,
            ),
            Flexible(
              // When I set a SizedBox here, Navigator fit the size
              // But I want an "automatic" size: the widget child size
              child: Navigator(
                key: _navigationKey,
                initialRoute: 'test',
                onGenerateRoute: (settings) {
                  if (settings.name == 'test') {
                    return MaterialPageRoute(
                      builder: (context) {
                        return RaisedButton(
                          onPressed: () {
                            Navigator.pushNamed(
                              _navigationKey.currentContext,
                              'tesdf',
                            );
                          },
                          // I just create a Text widget on this route here
                          // so I want the Navigator to fit the Text height size
                          // when displaying this route 
                          child: Text('rjkdf'),
                        );
                      },
                    );
                  } else {
                    return MaterialPageRoute(
                      builder: (context) {
                        // I set the size of the children to 80 but
                        // it seems to be ignored :/
                        // the Navigator fill the entire size but
                        // I want to be 80 when displaying this route 
                        return Container(
                          height: 80,
                          color: Colors.pink,
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Anyone have faced this issue ? Thanks in advance!



Solution 1:[1]

You can use IntrinsicHeight widget to fit the child widget height. (like fit-content in CSS)

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 R. M.