I am having trouble with my design as i want this container as a background for my dropdowns and textformfield. but its changing its size once i click on description or dates. Please help how to make it fixed. i have attached some screenshots also of before and after clicking the formfield.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
// color: Colors.white,
padding: const EdgeInsets.all(32.5),
constraints: const BoxConstraints(
minWidth: 0, maxWidth: 350, minHeight: 0, maxHeight: 440),
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 52,
width: 270,
padding: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: const Text('Select Chapter'),
items: chapteritemlist.map((item) {
return DropdownMenuItem(
value: item['chapterId'].toString(),
child: Text(item['chapter'].toString()),
);
}).toList(),
onChanged: (newVal) {
setState(() {
dropdownchapterdisplay = newVal;
});
chaptid = newVal;
print(chaptid);
getAllMember();
},
value: dropdownchapterdisplay,
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 52,
width: 270,
padding: EdgeInsets.symmetric(horizontal: 0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: const Text('Select Member'),
items: memberitemlist.map((item) {
return DropdownMenuItem(
value: item['id'].toString(),
child: Text(
item['name'].toString(),
style: const TextStyle(
fontSize: 9,
),
),
);
}).toList(),
onChanged: (newVal) {
setState(() {
dropdownmemberdisplay = newVal;
});
memberid = newVal;
},
value: dropdownmemberdisplay,
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 48,
width: 270,
child: TextFormField(
// The validator receives the text that the user has entered.
// textAlign: TextAlign.center,
controller: description,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
hintText: "Description",
filled: true,
fillColor: Colors.grey[200],
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 88,
width: 270,
child: DateTimeFormField(
decoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.black),
errorStyle: const TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
hintText: 'MM DD, YYYY',
filled: true,
fillColor: Colors.grey[200],
suffixIcon: const Icon(Icons.event_note),
labelText: 'Select Date',
),
mode: DateTimeFieldPickerMode.date,
autovalidateMode: AutovalidateMode.always,
validator: (e) => (e?.day ?? 0) == 1
? 'Please not the first day'
: null,
onDateSelected: (DateTime value) {},
),
),
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Row(children: <Widget>[
Padding(
padding: const EdgeInsets.all(6.0),
child: Align(
alignment: Alignment.bottomLeft,
child: ElevatedButton(
onPressed: () {
saveRequestModel = SaveClass();
saveRequestModel.Description = description.text;
saveRequestModel.UserName = global_Email;
saveRequestModel.Id = 0;
saveRequestModel.toFId = 0;
saveRequestModel.ToSelf = 0;
saveRequestModel.TranType = 0;
saveRequestModel.ToId = 6;
saveRequestModel.MeetingDate = '2022-10-02';
print(saveRequestModel.ToId);
SaveService saveService = SaveService();
saveService.save(saveRequestModel).then((value) {
print("data saved");
});
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepPurple[900],
textStyle: const TextStyle(
color: Colors.white,
fontSize: 25,
fontStyle: FontStyle.normal),
),
// color: Colors.deepPurple[900],
// textColor: Colors.white,
// elevation: 5,
child: const Text('Save',
style: TextStyle(fontSize: 20)),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Align(
alignment: Alignment.bottomRight,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepPurple[900],
textStyle: const TextStyle(
color: Colors.white,
fontSize: 25,
fontStyle: FontStyle.normal),
),
// color: Colors.deepPurple[900],
// textColor: Colors.white,
// elevation: 5,
child: const Text('Check Report',
style: TextStyle(fontSize: 20)),
),
))
]),
),
],
)),
Here is the full code.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:date_field/date_field.dart';
//import 'package:saarthi/api/saarthi_meeting/chapter_api.dart';
import 'package:saarthi/api/saarthi_meeting/sarthi_services.dart';
import 'package:http/http.dart' as http;
import 'package:saarthi/api/saarthi_meeting/save_button.dart';
import 'package:saarthi/model/saarthi_meeting/saarthi_model.dart';
import 'package:saarthi/model/saarthi_meeting/save_model.dart';
import 'package:saarthi/variables.dart';
void main() {
runApp(Saarthi_Meeting());
}
class Saarthi_Meeting extends StatelessWidget {
Saarthi_Meeting({Key? key}) : super(key: key);
String value = "";
String url = '';
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: datadisplay(),
debugShowCheckedModeBanner: false,
);
}
}
class datadisplay extends StatefulWidget {
const datadisplay({Key? key}) : super(key: key);
@override
State<datadisplay> createState() => _datadisplayState();
}
class _datadisplayState extends State<datadisplay> {
final SaarthiService _fetchdata = SaarthiService();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepPurple[900],
appBar: AppBar(
title: Image.asset('assets/images/CG.png', width: 200),
backgroundColor: Colors.deepPurple[900],
elevation: 13,
actions: [
IconButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => smdesign()));
},
icon: const Icon(Icons.add),
)
],
),
body: Container(
padding: const EdgeInsets.all(20),
child: FutureBuilder<List<Saarthidata>>(
future: _fetchdata.smdata(),
builder: (context, snapshot) {
var data = snapshot.data;
return ListView.builder(
itemCount: data?.length,
itemBuilder: (context, index) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
onTap: () {
if (data?[index].id != null) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => smdesign(),
),
);
}
},
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'On Date - ${data?[index].date}',
style: const TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600),
),
const SizedBox(height: 10),
Text(
'From User - ${data?[index].fromName}',
style: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
const SizedBox(height: 10),
Text(
'To User - ${data?[index].toName}',
style: const TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w400,
),
),
const SizedBox(height: 10),
]),
),
),
);
});
}),
),
);
}
}
class smdesign extends StatefulWidget {
smdesign({Key? key}) : super(key: key);
@override
State<smdesign> createState() => _smdesignState();
}
class _smdesignState extends State<smdesign> {
String? dropdownvalue = "Self";
String chaptervalue = "One";
bool isVisible = false;
//---------------------variable----------------------------------------------------API
List chapteritemlist = [];
var dropdownchapterdisplay;
//---------------------variable----------------------------------------------------API
List memberitemlist = [];
var dropdownmemberdisplay;
//------------------------------api dropdown 3 ---------------------------------
//--------------------------------------------------------------------------API
//----------------------------------save-------------------save--------------------------
late SaveClass saveRequestModel;
var description = TextEditingController();
//----------------------------------save-------------------save--------------------------
@override
void initState() {
super.initState();
getAllChapter();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.deepPurple[900],
appBar: AppBar(
title: Image.asset('assets/images/CG.png', width: 200),
backgroundColor: Colors.deepPurple[900],
elevation: 13,
),
body: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
// color: Colors.white,
padding: const EdgeInsets.all(32.5),
constraints: const BoxConstraints(
minWidth: 0, maxWidth: 350, minHeight: 0, maxHeight: 440),
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 52,
width: 270,
padding: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: const Text('Select Chapter'),
items: chapteritemlist.map((item) {
return DropdownMenuItem(
value: item['chapterId'].toString(),
child: Text(item['chapter'].toString()),
);
}).toList(),
onChanged: (newVal) {
setState(() {
dropdownchapterdisplay = newVal;
});
chaptid = newVal;
print(chaptid);
getAllMember();
},
value: dropdownchapterdisplay,
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
height: 52,
width: 270,
padding: EdgeInsets.symmetric(horizontal: 0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
// color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: const Text('Select Member'),
items: memberitemlist.map((item) {
return DropdownMenuItem(
value: item['id'].toString(),
child: Text(
item['name'].toString(),
style: const TextStyle(
fontSize: 9,
),
),
);
}).toList(),
onChanged: (newVal) {
setState(() {
dropdownmemberdisplay = newVal;
});
memberid = newVal;
},
value: dropdownmemberdisplay,
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 48,
width: 270,
child: TextFormField(
// The validator receives the text that the user has entered.
// textAlign: TextAlign.center,
controller: description,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
hintText: "Description",
filled: true,
fillColor: Colors.grey[200],
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 88,
width: 270,
child: DateTimeFormField(
decoration: InputDecoration(
hintStyle: const TextStyle(color: Colors.black),
errorStyle: const TextStyle(color: Colors.redAccent),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
hintText: 'MM DD, YYYY',
filled: true,
fillColor: Colors.grey[200],
suffixIcon: const Icon(Icons.event_note),
labelText: 'Select Date',
),
mode: DateTimeFieldPickerMode.date,
autovalidateMode: AutovalidateMode.always,
validator: (e) => (e?.day ?? 0) == 1
? 'Please not the first day'
: null,
onDateSelected: (DateTime value) {},
),
),
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Row(children: <Widget>[
Padding(
padding: const EdgeInsets.all(6.0),
child: Align(
alignment: Alignment.bottomLeft,
child: ElevatedButton(
onPressed: () {
saveRequestModel = SaveClass();
saveRequestModel.Description = description.text;
saveRequestModel.UserName = global_Email;
saveRequestModel.Id = 0;
saveRequestModel.toFId = 0;
saveRequestModel.ToSelf = 0;
saveRequestModel.TranType = 0;
saveRequestModel.ToId = 6;
saveRequestModel.MeetingDate = '2022-10-02';
print(saveRequestModel.ToId);
SaveService saveService = SaveService();
saveService.save(saveRequestModel).then((value) {
print("data saved");
});
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepPurple[900],
textStyle: const TextStyle(
color: Colors.white,
fontSize: 25,
fontStyle: FontStyle.normal),
),
// color: Colors.deepPurple[900],
// textColor: Colors.white,
// elevation: 5,
child: const Text('Save',
style: TextStyle(fontSize: 20)),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Align(
alignment: Alignment.bottomRight,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepPurple[900],
textStyle: const TextStyle(
color: Colors.white,
font size: 25,
fontStyle: FontStyle.normal),
),
// color: Colors.deepPurple[900],
// textColor: Colors.white,
// elevation: 5,
child: const Text('Check Report',
style: TextStyle(fontSize: 20)),
),
))
]),
),
],
)),
),
);
}
}
Before Image -This is before clicking anything. The design
After Image -when I click on the description form field it shows like this.
