I want to achieve this type of alert dialogue. so, far I able to achieve this.
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.
CodePudding user response：
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,
),
),
),
],
),
],
),
),
],
),
);
},
),
),
);
}
}
CodePudding user response：
Just do TimeObject = await showTimePicker(etc) instead of showDialog
CodePudding user response：
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.