import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: TestScreenBody(),
        ),
      ),
    );
  }
}
class TestScreenBody extends StatelessWidget {
  const TestScreenBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Spacer(
          flex: 1,
        ),
        Flexible(
          flex: 9,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(
                flex: 9,
                child: Padding(
                  padding: const EdgeInsets.all(15),
                  /*
                  We see the Stack Widget behaving properly when using inside a generic 'icon:'
                  In this example an IconButton.
                  */
                  child: IconButton(
                    onPressed: null,
                    icon: Stack(
                      children: const [
                        Icon(Icons.umbrella),
                        Positioned(
                          top: 0,
                          right: 0,
                          child: Text(
                            'Test',
                            style: TextStyle(fontSize: 10, color: Colors.red),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                child: NavigationRail(
                    labelType: NavigationRailLabelType.none, /* <-------------- ONLY HAPPENS WHEN LABEL TYPE IS NONE */
                    destinations: [
                      NavigationRailDestination(
                        /*
                  We are inside the NavigationRail.
                  We see the Stack Widget behaving in an unwanted way inside the 'icon:', 
                  there exist some unwanted spacing.
                  */
                        icon: Stack(
                          children: const [
                            Icon(Icons.umbrella),
                            Positioned(
                              top: 0,
                              right: 0,
                              child: Text(
                                'Test',
                                style:
                                    TextStyle(fontSize: 10, color: Colors.red),
                              ),
                            ),
                          ],
                        ),
                        label: const Text('Bugged'),
                      ),
                      const NavigationRailDestination(
                        /*
                   We are inside the NavigationRail.
                   Normal Icon given to the 'icon:' widget behaves as expected.
                  */
                        icon: Icon(Icons.umbrella),
                        label: Text('Umbrella'),
                      ),
                      NavigationRailDestination(
                        /*
                  We are inside the NavigationRail.
                  Temporary Fix is to wrap it inside a Center Widget
                  */
                        icon: Center(
                          child: Stack(
                            children: const [
                              Icon(Icons.umbrella),
                              Positioned(
                                top: 0,
                                right: 0,
                                child: Text(
                                  'Test',
                                  style: TextStyle(
                                      fontSize: 10, color: Colors.red),
                                ),
                              ),
                            ],
                          ),
                        ),
                        label: const Text('Bug'),
                      ),
                    ],
                    selectedIndex: 0),
              ),
            ],
          ),
        ),
      ],
    );
  }
}