flutterflutter-layoutflutter-animationflutter-design
How I can set this icon to top right corner without space in flutter UI
I am new for flutter
I want this edit icon to top right corner without any space (margin) like this
Edit icon touch to top right corner without and space and edit icon is over the ID row
but when i code edit icon have some default space from top and right corner and ID row start at bottom of edit icon like below SS
My Code is
Container(
width: double.infinity,
height: 330,
margin: EdgeInsets.fromLTRB(40, 30, 40, 0),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 5),
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white),
child: Column(
children: [
Row(
children: [
Container(
child: Icon(
Icons.edit,
color: Colors.blue,
),
color: Colors.pinkAccent,
width: 35,
height: 35,
),
],
mainAxisAlignment: MainAxisAlignment.end,
),
Row(
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
decoration: BoxDecoration(
color: Color(0xfffce8ef),
border:
Border.all(color: Color(0xfffce8ef), width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Center(
child: Icon(
Icons.tag,
color: Color(0xfff2426d),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("ID :",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15)),
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("#12345",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15)),
),
],
),
],
),
Row(
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
decoration: BoxDecoration(
color: Color(0xfffce8ef),
border:
Border.all(color: Color(0xfffce8ef), width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Center(
child: Icon(
Icons.phone_android_outlined,
color: Color(0xfff2426d),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text("Phone Number :",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15)),
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("+83 1234567890",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15)),
),
],
),
],
),
Row(
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
decoration: BoxDecoration(
color: Color(0xfffce8ef),
border:
Border.all(color: Color(0xfffce8ef), width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Center(
child: Icon(
Icons.mail_outline_rounded,
color: Color(0xfff2426d),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text("Email Id :",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15)),
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("[email protected]",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15)),
),
],
),
],
),
Row(
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
decoration: BoxDecoration(
color: Color(0xfffce8ef),
border:
Border.all(color: Color(0xfffce8ef), width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Center(
child: Icon(
Icons.outlined_flag,
color: Color(0xfff2426d),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text("Language :",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15)),
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("English",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15)),
),
],
),
],
),
Row(
children: [
Container(
width: 40,
height: 40,
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
decoration: BoxDecoration(
color: Color(0xfffce8ef),
border:
Border.all(color: Color(0xfffce8ef), width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Center(
child: Icon(
Icons.person_outline_rounded,
color: Color(0xfff2426d),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text("Member Since :",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15)),
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text("June 2013",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 15)),
),
],
),
],
),
],
),
)
Solution
The boarder in your MAin container cause this issue, try to remove it:
Container(
width: double.infinity,
height: 330,
margin: EdgeInsets.fromLTRB(40, 30, 40, 0),
decoration: BoxDecoration(
// border: Border.all(color: Colors.white, width: 5), <--- remove this
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white
),
...
)
also if you want to rounded that corner too add this to your main container too:
clipBehavior: Clip.antiAlias,
- Flutter flavor build from Xcode different main.dart
- flutter fatal: early EOF invalid index-pack output
- Flutter get image from firebase storage and show it in app
- Flutter does not show any results
- Hide keyboard on scroll in Flutter
- Is there a way to add a background image to a flutter app widescale?
- flutter how to get rid of a icon padding?
- Flutter - Datatable - How to set a background color for heading / first row?
- Why does adding this Flutter widget make the app not responsive to mouse clicks?
- "flutterfire configure" command won't let me type in a package name
- Video Player plugin for Flutter not working correctly when deploy to Firebase hosting
- How to convert asset image to File?
- How to give a "Dashed Border" in flutter?
- As demanded by Google, since I moved to `targetSdkVersion` 34 (from 33) , my app crashes
- Why those two switch blocks are not equivalent?
- Getting Error while Dexing. after upgrading flutter to 3.19.0
- packages have newer versions incompatible with dependency constraints
- White space get converted to + in url_launcher mailto scheme | Flutter
- Does the photoURL property of FIrebase Auth user object update in realtime over multiple devices?
- why flutter_fortune_wheel always run instantly after page open?
- Where do I find the Flutter web environment declarations in Chrome?
- Missing Run And Debug Launch Configuration button in VS Code
- Unable to use a Callable Cloud Function in Flutter
- TextInputAction.next not going to next field when has a suffixIcon in Flutter
- flutter doctor --android-licenses does not work
- Flutter: How to use Stack Widget in Listview
- Flutter Firebase and Android issue - unable to initialise. Cannot find google-services.json with latest (sept 2020) migration instructions executed
- FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command
- Target debug_ios_bundle_flutter_assets failed:
- Flutter - Handle status code 302 in POST request