Flutter Question posted in
The official Flutter documentation can be found here.

Flutter ListView in AlertDialog overlaps with Dialog Title

I have a simple ListView in my alert dialog. It allows a user to make selection and once selected, the list tile color changes.

The weird issue that I am having is for the selected tiles, when I scroll, it overlaps with the title of the dialog:

enter image description here
enter image description here

But for the other unselected tiles, it just goes under the title as desired.

My code is as below:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:mauritius_emergency_services/core/models/service.dart';
import 'package:mauritius_emergency_services/core/providers/services.dart';
import 'package:mauritius_emergency_services/core/providers/settings.dart';

class EmergencyButtonDialog extends ConsumerWidget {
  const EmergencyButtonDialog({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final settings = ref.watch(settingsProvider);
    final uiState = ref.watch(servicesProvider).when(
          data: (services) => ServiceListView(
            services: services,
            selectedService: settings.emergencyButtonAction,
            onServiceSelected: (service) {
              ref
                  .read(settingsProvider.notifier)
                  .updateEmergencyButtonAction(service);
            },
          ),
          loading: () => const CircularProgressIndicator(),
          error: (error, stack) => const Text("Error occurred"),
        );

    return AlertDialog(
      title: const Text("Choose Emergency Action"),
      contentPadding: EdgeInsets.zero, // Remove default padding
      content: SizedBox(
        width: double.maxFinite,
        height: 300,
        child: uiState,
      ),
    );
  }
}

class ServiceListView extends StatelessWidget {
  final List<Service> services;
  final Service selectedService;
  final Function(Service) onServiceSelected;

  const ServiceListView({
    super.key,
    required this.services,
    required this.selectedService,
    required this.onServiceSelected,
  });

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: services
          .map(
            (service) => ListTile(
              selected: service.identifier == selectedService.identifier,
              selectedColor: Theme.of(context).colorScheme.onTertiary,
              selectedTileColor: Theme.of(context).colorScheme.tertiary,
              title: Text(service.name),
              subtitle: Text(service.mainContact.toString()),
              trailing: service.identifier == selectedService.identifier
                  ? Icon(
                      Icons.check_circle,
                      color: Theme.of(context).colorScheme.onTertiary,
                    )
                  : null,
              onTap: () {
                onServiceSelected(service);
              },
            ),
          )
          .toList(),
    );
  }
}

And this is how i launch my dialog:

showDialog<String>(
              context: context,
              builder: (BuildContext context) => LanguageDialog(),
            );

Anyone know why this is happening ?

Tags:

2

Answers


  1. 0

    Your title text is too large.

    You can reduce the text size:

    title: const Text("Choose Emergency Action",
                    style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal)),

    Or the text length:

    title: const Text("Choose Action"),
    Login or Signup to reply.
  2. 0

    Instead of giving title to alert box by using its title property , you can just add a Text widget on top of your ListView.

    Full Code : –

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: ListView(children: [
      for (int i = 0; i < 5; i++) ...[
        AlertDialog(
          content: SizedBox(
            width: double.maxFinite,
            height: 300,
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Text( // < - Title Text
                    "Choose Emergency Action",
                    style: TextStyle(fontWeight: FontWeight.w800, fontSize: 25),
                  ),
                  for (int i = 0; i < 10; i++) ...[
                    Container(
                        height: 50,
                        margin: EdgeInsets.symmetric(vertical: 10),
                        color: Colors.purple[100],
                        alignment: Alignment.center,
                        child: Text("Item : - $i"))
                  ]
                ],
              ),
            ),
          ),
        )
      ]
    ])));
  }
}

    Output: –

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search