How to make dart flutter popup box?

Question

I have an application like this:

My aim is that when I press the eye icon next to the text "Hello", I want a box to open just below the text and write the German version of "Hello". So it will say "Hallo".

My purpose is to show the meaning of the word.

When I press the eye, I want to show the German of the word. How can I make a white box under the word Hello, that is, the box in which the German language will be written?

Codes:

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

class selamlasmaLearn extends StatelessWidget {

  List <wordAndMeaning> wordsList = [wordAndMeaning("Hello", "Hallo"), wordAndMeaning("Go", "Gehen")];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (context) {
          final double height = MediaQuery.of(context).size.height;

          return CarouselSlider(
            options: CarouselOptions(
              height: height,
              viewportFraction: 1.0,
              enlargeCenterPage: false, 
            ),
            items: wordsList.map((wordAndMeaning word) {
              return Builder(
                builder: (BuildContext context) {
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(color: Colors.amber),
                    child: Center(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            word.word, 
                            style: TextStyle(fontSize: 45, color: Colors.white),
                          ),
                          SizedBox(width: 10,),
                          Icon(Icons.remove_red_eye_sharp, color: Colors.white, size: 25,), // <<<<<<<<<
                        ],
                      ),
                    ),
                  );
                },
              );
            }).toList(),
            );
        }
            ),
          );
        }
  }

class wordAndMeaning {
  String word;
  String meaning;

  wordAndMeaning(this.word, this.meaning);
}

I keep the word and its German in a list called wordsList .

Thanks for the help in advance.

Answer 1

You can convert the widget to StatefulWidget or use a ValueNotifier to control the preserve/notify the state visibility.

You can use Visibility widget or just if to show and hide German text.

class selamlasmaLearn extends StatefulWidget {
  @override
  State<selamlasmaLearn> createState() => _selamlasmaLearnState();
}

class _selamlasmaLearnState extends State<selamlasmaLearn> {
  bool _showGerman = false;

  List<wordAndMeaning> wordsList = [
    wordAndMeaning("Hello", "Hallo"),
    wordAndMeaning("Go", "Gehen")
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        final double height = MediaQuery.of(context).size.height;

        return CarouselSlider(
          options: CarouselOptions(
            height: height,
            viewportFraction: 1.0,
            enlargeCenterPage: false,
          ),
          items: wordsList.map((wordAndMeaning word) {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(color: Colors.amber),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(word.word,
                              style:
                                  TextStyle(fontSize: 45, color: Colors.white)),
                          if (_showGerman) Text(word.meaning), //modify the way you want
                        ],
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      IconButton(
                        icon: Icon(Icons.remove_red_eye_sharp),
                        color: Colors.white,
                        iconSize: 25,
                        onPressed: () {
                          setState(() {
                            _showGerman = !_showGerman;
                          });
                        },
                      ),
                    ],
                  ),
                );
              },
            );
          }).toList(),
        );
      }),
    );
  }
}

Answer 2

Use the Tooltip widget

I'm emphasizing on the popup part in your question title. When using a Tooltip you ensure that your widgets do not shift position or jump when the Tooltip widget appear, as the example below illustrates.

Example code:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Tooltip(
            // Set the tooltip to trigger on a single tap, tapping outside the
            // widget will make the tooltip disappear.
            triggerMode: TooltipTriggerMode.tap,

            // The message shown when the tooltip appears.
            message: "Tooltip showing!",

            // Consider adjusting this to your needs.
            showDuration: const Duration(days: 1),

            // The widget that must be clicked to show the tooltip.
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Text("Hello"),
                  SizedBox(
                    width: 8,
                  ),
                  Icon(Icons.visibility),
                ],
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text("Cover me!"),
          )
        ],
      ),
    );
  }
}

// Some code to run the above example, note the theme part that turns the
// tooltip white.
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Style the overall design of tooltips in the app in one place,
      // or provide in each tooltip individually.
      theme: ThemeData(
        tooltipTheme: const TooltipThemeData(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(
              Radius.circular(4),
            ),
          ),
          textStyle: TextStyle(
            backgroundColor: Colors.white,
            color: Colors.black,
          ),
        ),
      ),

      home: const Scaffold(
        backgroundColor: Colors.amber,
        body: TooltipExample(),
      ),
    );
  }
}

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

Here is how it looks:

Note that the Tooltip widget overlays whatever is below it. (instead of pushing it further down - like toggling the visibility of a normal widget in a row or column would have done)