How to create alert dialog with text field using GetX in flutter

Question

I am able to create popup dialogs using Get.defaultDialog() function. I could not find a method in GetX for creating custom alert dialogs.

I am using the function below to achieve that which uses native flutter showDialog api.

showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TextField(
                    controller: categoryNameController,
                    keyboardType: TextInputType.text,
                    maxLines: 1,
                    decoration: InputDecoration(
                        labelText: 'Category Name',
                        hintMaxLines: 1,
                        border: OutlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.green, width: 4.0))),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),
                  RaisedButton(
                    onPressed: () {
                      if (categoryNameController.text.isNotEmpty) {
                        var expenseCategory = ExpenseCategory(
                            categoryNameController.text,
                            id: _addExpenseController.expenseCategories.length);
                        _expenseController.addExpenseCategory(expenseCategory);
                        _addExpenseController.expenseCategories
                            .add(expenseCategory);
                        Get.back();
                      }
                    },
                    child: Text(
                      'ADD CATEGORY',
                      style: TextStyle(color: Colors.white, fontSize: 16.0),
                    ),
                    color: Colors.redAccent,
                  )
                ],
              ),
              elevation: 12.0,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)));
        });

Ironware

Answer 1

I am able to achieve that using below function

Get.defaultDialog(
      title: '',
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: settingsScreenController.categoryNameController,
              keyboardType: TextInputType.text,
              maxLines: 1,
              decoration: InputDecoration(
                  labelText: 'Category Name',
                  hintMaxLines: 1,
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.green, width: 4.0))),
            ),
            SizedBox(
              height: 30.0,
            ),
            RaisedButton(
              onPressed: () {
                if (settingsScreenController
                    .categoryNameController.text.isNotEmpty) {
                  var expenseCategory = ExpenseCategory(
                      settingsScreenController.categoryNameController.text,
                      id: _addExpenseController.expenseCategories.length);
                  settingsScreenController.addExpenseCategory(expenseCategory);
                  _addExpenseController.expenseCategories.add(expenseCategory);
                  Get.back();
                } else {
                  Utils.showSnackBar("Enter category name");
                }
              },
              child: Text(
                'ADD CATEGORY',
                style: TextStyle(color: Colors.white, fontSize: 16.0),
              ),
              color: Colors.redAccent,
            )
          ],
        ),
        radius: 10.0);

But i could not remove the title area in the dialog.

Native API dialog without title

GetX dialog api with title

Ironware

titleStyle: TextStyle(fontSize: 0) should remove the title space – Chemoprophylaxis

Answer 2

import 'dart:ui';

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

void main(List<String> args) {
  runApp(GetMaterialApp(
    title: 'My App',
    home: MyApp(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Show Dialog'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Get.defaultDialog(
                    
                  );
                },
                child: Text('Click GetX')),
          ],
        ),
      ),
    );
  }
}

Hardy

Concern in OP is about creating custom dialog box with GetX, OP already can use the above mentioned defaultDialog() and get the default dialog – Pleiad