如何制作dart flutter彈框？

Question

我有一個這樣的應用程序：

我的目標是當我按下文本“你好”旁邊的眼睛圖標時，我希望在文本下方打開一個框並寫下德語版的“你好”。 所以它會說“你好”。

我的目的是展示這個詞的意思。

當我按下眼睛時，我想展示這個詞的德語。 如何在 Hello 一詞下方制作一個白框，即要在其中寫入德語的框？

代碼：

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);
}

我將單詞及其德語保存在名為wordsList的列表中。

我在這里先向您的幫助表示感謝。

Answer 1

您可以將小部件轉換為StatefulWidget或使用ValueNotifier來控制保留/通知 state 可見性。

您可以使用Visibility widget 或 just if來顯示和隱藏德語文本。

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

使用工具提示小部件

我強調你問題標題中的彈出部分。 使用工具提示時，請確保您的小部件不會在工具提示小部件出現時移動 position 或跳轉，如下例所示。

示例代碼：

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());

這是它的樣子：

請注意，工具提示小部件覆蓋了它下面的任何內容。 （而不是將它進一步向下推 - 就像在行或列中切換普通小部件的可見性一樣）