DropdownButton is not dropping down in my custom header in Flutter

Viewed 55

I have a DropdownButton in my custom header widget that doesn't work. If I put the button in the content of the program it works fine, but not in the header. I get no errors.

This is the widget:

import 'package:flutter/material.dart';

class TestBar extends StatelessWidget {
  const TestBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 80.0,
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        mainAxisSize: MainAxisSize.min,
        children: const [
          Text('Text', style: TextStyle(fontSize: 18.0),),
          SizedBox(width: 20.0,),
          DropTest(
            items: [
              'Collections',
              'Item 1',
              'Item 2',
              'Item 3',
            ],
          ),
          SizedBox(width: 20.0,),
          Text('Text', style: TextStyle(fontSize: 18.0),),
          SizedBox(width: 20.0,),
        ],
      ),
    );
  }
}

class DropTest extends StatelessWidget {
  final List<String> items;
  const DropTest({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      value: items[0],
      elevation: 0,
      style: const TextStyle(fontSize: 18.0),
      icon: const Icon(Icons.keyboard_arrow_down_outlined, size: 20,),
      underline: Container(height: 0,),
      items: items.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(
            value,
            style: const TextStyle(fontSize: 18.0),
          ),
        );
      }).toList(),
      onChanged: (String? newValue) {
        switch (newValue) {
          case 'Cucine':
            return _goToPath(cucineRoute);
          case 'Bagni':
            return _goToPath(bagniRoute);
          case 'Living':
            return _goToPath(livingRoute);

          default:
            return;
        }
      },
    );
  }
}

void _goToPath(String navigationPath) {
  //navigation to a certain page;
}

And this is where I use the header widget:

import 'package:flutter/material.dart';
import 'package:responsive_builder/responsive_builder.dart';
import 'package:sito_woodandstone/settings/constants.dart';
import 'package:sito_woodandstone/widgets/navigation_bar/test_bar.dart';

class LayoutTemplate extends StatelessWidget {
  final Widget child;
  const LayoutTemplate({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        backgroundColor: colorBackground,
        body: Column(
          children: [
            const TestBar(),
            //NavBar(),
            Expanded(
              child: child,
            ),
          ],
        ),
      ),
    );
  }
}

This is where the LayoutTemplate is used in the main function

import 'package:flutter/material.dart';
import 'package:sito_woodandstone/locator.dart';
import 'package:sito_woodandstone/routing/rout_names.dart';
import 'package:sito_woodandstone/routing/router.dart';
import 'package:sito_woodandstone/services/navigation_serivice.dart';
import 'package:sito_woodandstone/views/layout_template/layout_template.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wood & Stone',
      theme: ThemeData(
          textTheme:
              Theme.of(context).textTheme.apply(fontFamily: 'HeadingPro')),
      builder: (context, child) => LayoutTemplate(child: child!),
      navigatorKey: locator<NavigationService>().navigatorKey,
      onGenerateRoute: generateRoute,
      initialRoute: cucineRoute,
    );
  }
}

The Dropdown button below in the content is working but the one above is not image

I tried to remove the responsive builder but that is not the problem. I think there is something off in the main function, but I can't figure out what it is... Any ideas? Please help

0 Answers
Related