CODEWITHSUNDEEP
flutterandroid-alertdialog
Trendy202
Trendy202

Reputation: 7

Flutter, open the Text displayed inside a Card in an Alert dialog

in flutter, i'm trying to get the text in the card to be displayed in the Alert Dialog when the card is tapped just like in the pictures below:

image 1

image 2

I merely ask to be pointed in the right direction of how something like this would be acomplished. Although hand-helding would be appreciated, i ask atleast for where to start at.

Thank you in advance!

Upvotes: 0

Views: 1826

Answers (1)

Abbas.M
Abbas.M

Reputation: 3394

What I would suggest is having the String for the text of the card stored inside a variable, what you would then do is onTap of the card you call a function that you create and pass the variable that you stored the string of the text is showMyDialog(textVariable) which would call the function to display the dialog and then display the text using the textVariable.

I've attached a more accurate example to achieve what you want. You can tweak the UI as u wish

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String displayText = "Same Text Everywhere";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: ()=> showMyDialog(context,displayText),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(displayText),
            ),
          ),
        )
      ),
    );
  }

  Future<void> showMyDialog(BuildContext context, String displayText) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Text(displayText),
        );
      },
    );
  }


}

Upvotes: 1

Related Questions