How can I combine multiple textfields using Flutter? - flutter

Question

How can I stack multiple textfields like this? I am trying to replicate this screen.
I've tried creating a Container with rounded borders, with a Column as the child containing multiple textfields. But the textfields extend past the border of the Container and the margin between them is too big.
My code so far:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Administration extends StatefulWidget {
const Administration({Key? key}) : super(key: key);
#override
State<Administration> createState() => _AdministrationState();
}
class _AdministrationState extends State<Administration> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
body: Column(children: [
CupertinoNavigationBar(
automaticallyImplyLeading: false,
leading: IconButton(
icon: const Icon(
Icons.chevron_left,
size: 23,
),
color: Colors.grey,
onPressed: () {
Navigator.of(context).pop();
}),
trailing: const Icon(
Icons.account_circle,
size: 30.0,
color: Colors.grey,
),
middle: const Text('New Event'),
),
SizedBox(height: 15.0),
Container(
child: Column(
children: [],
),
)
],
)
);
}
}

Answer 1

From the image i see created a example for you:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('sampla app'),
),
body: Container(
color: const Color(0xff1c1c1d),
child: Column(
children: [
const SizedBox(
height: 50,
),
Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(color: const Color(0xff4c4c54), borderRadius: BorderRadius.circular(10.0)),
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Title',
labelStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
margin: const EdgeInsets.only(left: 20),
height: 0.2,
color: Colors.grey,
),
const Padding(
padding: EdgeInsets.only(left: 20.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Location or Video Call',
labelStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
),
),
],
),
),
);
}
}
Adding the image as well for how it looks.
Let me know if this works for you.