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

Flutter – Make a text widget with a title and edit button icon

I’m tyring to create a widget that looks like this. The box is not editable. It brings up a popup or a dialog like the second picture only when the edit button is clicked. O saves the text. X cancels it. Any idea how someone would go about coding this?

enter image description here

enter image description here

i’ve tried literally everything. textfield, text, but i’m new to flutter. please be patient.

Tags:

2

Answers


  1. 0

    I have created the widget for you. Hope this helps.

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

  @override
  State<PopUpContainer> createState() => _PopUpContainerState();
}

class _PopUpContainerState extends State<PopUpContainer> {
  final controller = TextEditingController();

  @override
  void initState() {
    controller.text = 'Actual Text to displayedncontinued...ncontinued...';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Colors.blue, borderRadius: BorderRadius.circular(10)),
      height: 150,
      width: 200,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Notes",
            style: TextStyle(fontWeight: FontWeight.w600),
          ),
          const SizedBox(
            height: 10,
          ),
          Text(controller.text),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              IconButton(
                  alignment: Alignment.center,
                  onPressed: () {
                    showBottomSheet(
                        context: context,
                        builder: (context) => Container(
                              height: 200,
                              child: Column(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.all(15),
                                    child: TextField(
                                      decoration: const InputDecoration(
                                        labelText: 'Edit Text',
                                      ),
                                      controller: controller,
                                    ),
                                  ),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                      IconButton(
                                          onPressed: () {
                                            Navigator.pop(context);
                                            setState(() {});
                                          },
                                          icon: const Icon(
                                              Icons.circle_outlined)),
                                      IconButton(
                                          onPressed: () {
                                            Navigator.pop(context);
                                          },
                                          icon: const Icon(Icons.close_rounded))
                                    ],
                                  )
                                ],
                              ),
                            ));
                  },
                  icon: const Icon(Icons.edit)),
            ],
          )
        ],
      ),
    );
  }
}

    There are other widgets to create a popup. You can find them on Flutter Documentation.

    Login or Signup to reply.
  2. 0

    Here, I wrote the code for you and added some explanations here and there:

    class MyBox extends StatelessWidget {
  const MyBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(), // this is to create a border
        borderRadius:
            BorderRadius.circular(10), // this is to make corners circular
        color: Colors.blue[200],
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: IntrinsicWidth(
          // added this so Align widget doesnt brake stuff and make container stretch. This is rarely needed
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'title',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text('Actual text displaynContinued..nContinued..'),
              Align(
                // this is to Align the button to the bottom right
                alignment: Alignment.bottomRight,
                child: IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () {
                    showDialog(
                      // this is to show the dialog popup
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          backgroundColor: Colors.transparent,
                          content: Container(
                            decoration: BoxDecoration(
                              border: Border.all(),
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.blue[200],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: IntrinsicWidth(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      'title',
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Text(
                                        'Actual text displaynContinued..nContinued..'),
                                    Align(
                                      alignment: Alignment.bottomRight,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.end,
                                        children: [
                                          IconButton(
                                            onPressed: () {
                                              //save here
                                            },
                                            icon: Icon(Icons.circle_outlined),
                                          ),
                                          IconButton(
                                            onPressed: () {
                                              //cancel here
                                            },
                                            icon: Icon(Icons.close_rounded),
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

    To actually save data to device memory, I suggest you to use packages like Hive: https://pub.dev/packages/hive

    There are great youtube tutorials about it.

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

Back To Top
Search