flutterwidgetcomponentsbox
how to create separate box for each category in flutter
I am creating a employee bio data page, for this i have 4 to 5 categories e.g. Personal data, family info, skills, employee history.
my output should be like this
for all categories, how i can create it in flutter.
i have done this
and want to convert it to like above design.
---------------EDITED QUESTION--------------------------------
I did the below code but it is not meeting my requirement.
Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
child:Container(decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent,width: 100)
),
child:Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
))
here is its output
please help if anyone know the name of widget or how to create it.
Solution
You can get this layout by using Stack, Containers and Column
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 20, horizontal: 20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextButton(
onPressed: () {},
child: Text(
'Submit',
style: TextStyle(
fontSize: 13,
),
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(
width: 2, color: Colors.black),
),
foregroundColor:
MaterialStateProperty.all(
Colors.black),
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(
vertical: 2, horizontal: 30)),
textStyle: MaterialStateProperty.all(
TextStyle(fontSize: 30),
),
),
),
],
),
),
),
Positioned(
left: 30,
top: 10,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 3,
vertical: 2,
),
color: Colors.white,
child: Text(
'Personal Data',
style: TextStyle(
color: Colors.black, fontSize: 12),
),
),
),
],
),
- Flutter version 3.19.2 requires a newer version of the Kotlin Gradle plugin. /android/build.gradle: ext.kotlin_version = '<latest-version>'
- Is there a way to create pdf like form layout in flutter?
- "Swift Compiler Error (Xcode): Method does not override any method from its superclass" error after updating Xcode
- Why the multi-line TextField in Flutter has additional vertical padding?
- TextEditingController doesn't clear the text after .clear()
- what is Get.create() in the Getx package and what it does
- error: Build input file cannot be found: '/Users/GoogleService-Info.plist' (in target 'Runner' from project 'Runner')
- flutter android app freezes on the splash screen in release mode
- Replacing app launcher icon in flutter with new icon
- Emoji's aren't dispalying in Flutter web, they are black and white
- Flutter Location packages does not return current location on iOS
- how to hide Bottom Navigation Bar on new screen in flutter?
- Flutter blue plus connection state listener
- The imported package 'path' isn't a dependency of the importing package
- Flutter - video_player listener being called very slowly
- How to disable vertical scroll when horizontal scrolling on SlidingUpPanel
- Getting permission to the external storage (file_provider plugin)
- Flutter error - Gradle task assembleDebug failed with exit code -1
- Flutter: FCM Unhandled Exception: Null check operator used on a null value
- Flutter - How to align selected item from DropdownButton?
- flutter can not make sizebox expanded
- Showcaseview package highlighting CupertinoTabScaffold (used as BottomNavBar) [Flutter]
- Converting Numbers to Local (UTF8) Bengali numbers
- Flutter/Dart: Function return type for returning a ShowDialog based on AsyncValue list
- How can I keep a variable value inside an isolate/FlutterBackgroundService?
- Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15
- Hide a List tile when kIsWeb == true in Flutter app
- Why Dart uses YAML as package manager?
- Can enums share concrete methods to avoid repetition?
- How to get JSON data from an API in flutter