how i can achieve this type of dialog with textfield without using any library

Arslan 0
Viewed 30

enter image description here

I want to achieve this type of alert dialogue. so, far I able to achieve this.

enter image description here

 showDialog(
                                    context: context,
                                    builder: (context) {
                                      return AlertDialog(
                                        title: Text('Enter Time'),
                                        content:
                                            Builder(builder: (context) {
                                          var height = 100;
                                          var width = 60;
                                          return Container(
                                            height: height - 10,
                                            width: width - 10,
                                            child: Row(
                                              children: [
                                                Expanded(
                                                  flex: 2,
                                                  child: TextField(
                                                    onChanged: (value) {
                                                      setState(() {
                                                        // valueText = value;
                                                      });
                                                    },
                                                    decoration:
                                                        const InputDecoration(
                                                      hintText: "Hour",
                                                      //helperText: 'Hour',
                                                    ),
                                                  ),
                                                ),
                                                const Expanded(
                                                    child: Center(
                                                      child: Text(
                                                        ":",
                                                        style: TextStyle(
                                                        fontSize: 50),
                                                      ),
                                                    )),
                                                Expanded(
                                                  flex: 2,
                                                  child: TextField(
                                                    onChanged: (value) {
                                                      setState(() {
                                                        // valueText = value;
                                                      });
                                                    },
                                                    decoration:
                                                        const InputDecoration(
                                                      hintText:
                                                          "Min",
                                                     // helperText: 'Min',
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          );
                                        }),
                                        actions: <Widget>[
                                          ElevatedButton(
                                            child: Text('OK'),
                                            onPressed: () {
                                              setState(() {
                                                // codeDialog = valueText;
                                                Navigator.pop(context);
                                              });
                                            },
                                          ),
                                        ],
                                      );
                                    });

this my code and still need lots of improvements and guide me with suitable suggestions

can anybody give me overhead on how to make it achieve the same UI as above

note: I am asking for learning purposes only and am amazed if this UI is achievable through custom.

textfield user-interface flutter-dependencies dart flutter
3 Answers

Here is the full code solution. You just have to do little tweaking of fonts and padding stuff And of course add the functionality. I have created the UI for you.

import 'package:flutter/material.dart';

class Hello extends StatefulWidget {
  const Hello({Key? key}) : super(key: key);

  @override
  State<Hello> createState() => _HelloState();
}

class _HelloState extends State<Hello> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('Show Dialog'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (_) => SimpleDialog(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 20.0, vertical: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          'ENTER TIME',
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 20.0),
                          child: Row(
                            children: [
                              Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    color: Colors.grey,
                                    height: 80,
                                    width: 120,
                                    child: TextFormField(
                                      keyboardType: TextInputType.datetime,
                                      showCursor: false,
                                      initialValue: '15',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontSize: 70,
                                        color: Colors.black,
                                      ),
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                      ),
                                    ),
                                  ),
                                  Text('Hour'),
                                ],
                              ),
                              Text(
                                ':',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 70,
                                ),
                              ),
                              Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    color: Colors.grey,
                                    height: 80,
                                    width: 120,
                                    child: TextFormField(
                                      keyboardType: TextInputType.datetime,
                                      showCursor: false,
                                      initialValue: '15',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontSize: 70,
                                        color: Colors.black,
                                      ),
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                      ),
                                    ),
                                  ),
                                  Text('Minute'),
                                ],
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 40,
                        ),
                        Row(
                          children: [
                            Icon(Icons.access_time_outlined),
                            Spacer(),
                            TextButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text(
                                'Cancel',
                                style: TextStyle(
                                  color: Colors.black,
                                ),
                              ),
                            ),
                            TextButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text(
                                'OK',
                                style: TextStyle(
                                  color: Colors.black,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Demo

Sapinder Singh0

Just do TimeObject = await showTimePicker(etc) instead of showDialog

user146245950

Try this and edit for your wish

showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: Text('Enter Time'),
                                content: Builder(builder: (context) {
                                  var height = 100;
                                  var width = 60;
                                  return Container(
                                    height: height - 50,
                                    width: width - 30,
                                    child: Row(
                                      children: [
                                        Expanded(
                                          flex: 2,
                                          child: DecoratedBox(
                                            decoration: BoxDecoration(
                                              color: Colors.grey,
                                              borderRadius:
                                                  BorderRadius.circular(5),
                                            ),
                                            child: TextField(
                                              onChanged: (value) {
                                                setState(() {
                                                  // valueText = value;
                                                });
                                              },
                                              decoration: const InputDecoration(
                                                hintText: "Hour",
                                                border: UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                errorBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                enabledBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                focusedBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                disabledBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                focusedErrorBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                        const Expanded(
                                            flex: 1, child: Text(":")),
                                        Expanded(
                                          flex: 2,
                                          child: DecoratedBox(
                                            decoration: BoxDecoration(
                                              color: Colors.grey,
                                              borderRadius:
                                                  BorderRadius.circular(5),
                                            ),
                                            child: TextField(
                                              onChanged: (value) {
                                                setState(() {
                                                  // valueText = value;
                                                });
                                              },
                                              decoration: const InputDecoration(
                                                hintText: "Min",
                                                border: UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                errorBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                enabledBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                focusedBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                disabledBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                                focusedErrorBorder:
                                                    UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: AppColors
                                                          .transparent),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  );
                                }),
                                actions: <Widget>[
                                  ElevatedButton(
                                    child: Text('OK'),
                                    onPressed: () {
                                      setState(() {
                                        // codeDialog = valueText;
                                        Navigator.pop(context);
                                      });
                                    },
                                  ),
                                ],
                              );
                            });

Try this and keep posted.

Sugan Pandurengan0
Related