How to achieve gradient border with textFormField on focused - flutter

OutlinedInputBorder cannot accept a linear gradient for its color. I would like the border of the textFormField to be a gradient when the user clicks into it.
Here is my attempt. The border does not change.
GestureDetector(
onTap: () {
setState(() {
borderFocused = true;
});
},
child: Container(
decoration: borderFocused
? const BoxDecoration(
border: GradientBoxBorder(
gradient: LinearGradient(
colors: [
Color(0xff45a7f5),
Color(0xff76c479)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)))
: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color.fromARGB(
30, 192, 192, 192)))),
child: TextFormField(
cursorColor: Color.fromARGB(255, 192, 192, 192),
style: const TextStyle(
color: Color.fromARGB(255, 192, 192, 192)),
decoration: textInputDecoration.copyWith(
labelStyle: const TextStyle(
color: Color.fromARGB(255, 192, 192, 192)),
hintText: "Email",
prefixIcon: Icon(
Icons.email,
color: Theme.of(context).primaryColor,
)),


You can use ShaderMask to get you most of the way there:
Scaffold(
body: Center(
child: ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(colors: [Colors.red,Colors.blue]).createShader(bounds);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
cursorColor: Color.fromARGB(255, 192, 192, 192),
style: const TextStyle(color: Color.fromARGB(255, 192, 192, 192)),
decoration: InputDecoration(
border: OutlineInputBorder(borderSide: BorderSide(
)),
hintText: "Email",
prefixIcon: Icon(
Icons.email,
color: Theme.of(context).primaryColor,
)),
),
),
),
),
);

Related

resizeToAvoidBottomInset : false Doesn't Work in CurvedNavigationBar Flutter

I struggle with flutter CurvedNavigationBar.
Every time keyboard appears, CurvedNavigationBar sticks on Top of the keyboard.
I found many & different answers for this issue, but nothing worked for me.
I added resizeToAvoidBottomInset : false inside my Scafold, with no luck.
Any suggestions, please?
Thanks in advance!
**This is a part of my code
var pagesAll = [
SignUpScreen(),
HomeScreen(),
OtherScreen()
];
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: _page,
height: 60.0,
items: <Widget>[
Icon(Icons.perm_identity, size: 30),
Icon(Icons.home, size: 30),
Icon(Icons.message, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_page = index;
});
},
letIndexChange: (index) => true,
),
body: pagesAll[_page]);
}
/* Also the Sign up Sceen */
Widget initWidget() {
return Scaffold(
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 250,
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(90)),
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.only(left: 20, right: 20, top: 70),
padding: EdgeInsets.only(left: 20, right: 20),
height: 54,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Color(0xffEEEEEE)),
],
),
child: TextField(
controller: fullName,
cursorColor: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
decoration: InputDecoration(
icon: Icon(
Icons.person,
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
),
hintText: "Full Name",
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.only(left: 20, right: 20, top: 20),
padding: EdgeInsets.only(left: 20, right: 20),
height: 54,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Color(0xffEEEEEE)),
],
),
child: TextField(
controller: email,
cursorColor: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
decoration: InputDecoration(
icon: Icon(
Icons.email,
color: Color.fromARGB(255, 31, 162, 118).withOpacity(.75),
),
hintText: "Email",
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),) }

Finally, thanks to #john, I realised that I didn't include resizeToAvoidBottomInset : false in a parent wigdet Scafold.

Flutter, How can set height TextFromFiled with Container (counter text)?

I want to set height TextFormFeild with Container
There are some bottom padding? between Container and TextFormField
So focusedBorder can't cover all Container edge.
There are no paddings in parent Container.
How can I solve it.
TextFormField With Container Image
This is my code
height: 130,
margin: const EdgeInsets.only(top: 12.0, bottom: 40.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: const Color(0xffDDDDDD),
width: 0.5,
),
borderRadius: BorderRadius.circular(10.0),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.16),
offset: Offset(0, 1),
blurRadius: 2,
)
]),
child: TextFormField(
maxLength: 200,
buildCounter: (context,
{required currentLength,
required isFocused,
maxLength}) {
return Container(
transform: Matrix4.translationValues(0, -35, 0),
child: Text("$currentLength / $maxLength"),
);
},
maxLines: 5,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(
width: 2, color: Color(0xffFa7E66))),
border: OutlineInputBorder(
borderSide: const BorderSide(
width: 0.0, style: BorderStyle.none),
borderRadius: BorderRadius.circular(8.0),
),
hintText: 'hint text',
hintStyle: const TextStyle(
fontSize: 14.0, color: Color(0xff444444))),
),
),```

error borders not fit into the container- flutter

I'm new to flutter now I'm creating a login page for my app. when I submit empty fields, I'm getting this issue. it's not fit into the container. struggling to solve this problem. how to overcome this issue. appreciate your help on this. below I have provided my email field code with the picture of the issue I'm facing.
GlassmorphicContainer(
borderRadius: 30,
blur: 40,
padding: EdgeInsets.all(40),
alignment: Alignment.bottomCenter,
border: 2,
linearGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFffffff).withOpacity(0.1),
Color(0xFFFFFFFF).withOpacity(0.05),
],
stops: [
0.1,
1,
]),
borderGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFffffff).withOpacity(0.2),
Color((0xFFFFFFFF)).withOpacity(0.2),
],
),
height: 50,
width: 300,
child: TextFormField(
controller: emailEditingController,
enabled: true,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
// borderSide: const BorderSide(
// color: textWhite,
// ),
borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: textWhite),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: Colors.red),
),
//isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
hintText: "Email/ Username",
hintStyle: TextStyle(
color: textWhite, fontFamily: "Roboto", fontSize: 14),
),
style: TextStyle(color: buttontext),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
loginUserData['email'] = value!;
},
),
),

give some padding for container
Container(
padding: EdgeInsets.all(10),
child:TextFormField()
)

Increase the height and width of the container or add padding into the Container
Container(
height: 100.0, // height
width: 400.0, // Width
padding: EdgeInsets.all(10), // Padding
child: TextFormField(),
),

How to make TextField's label wont move when out of focus in Flutter

I'm new to flutter.
I'm trying to replicate the following UI, it has multiple TextField and all of their labels won't maximize when I click on other TextField, they keep on focus to show the content inside it: https://i.stack.imgur.com/8lUeV.png
The UI I made: https://i.stack.imgur.com/o9Rpj.png
I tried the autofocus: on but it didn't work cuz it only work for one TextField at a time.
My code:
import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';
class EmployeeProfile extends StatefulWidget {
const EmployeeProfile({Key? key, required this.user}) : super(key: key);
final User user;
#override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
late String name = '';
late String email = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.blue])),
height: MediaQuery.of(context).size.height * 0.3
),
Card(
elevation: 20.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
name = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: widget.user.name,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
email = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: widget.user.email,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: (){
print(widget.user.name);
print(widget.user.email);
setState(() {
widget.user.name = name;
widget.user.email = email;
});
},
child: const Text('Save'),
),
],
)
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(// Add AppBar here only
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
widget.user.name.toString(),
style: const TextStyle(
letterSpacing: 0.0,
fontSize: 20.0,
),
),
),
),
],
),
);
}
}
P/s: sr im not really good at English to describe it correctly

Label will be visible if you focus on the TextField or TextField has content. If what you mean is keeping the label always be visible, you can add floatingLabelBehavior: FloatingLabelBehavior.always on InputDecoration.
import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';
class EmployeeProfile extends StatefulWidget {
const EmployeeProfile({Key? key, required this.user}) : super(key: key);
final User user;
#override
_EmployeeProfileState createState() => _EmployeeProfileState();
}
class _EmployeeProfileState extends State<EmployeeProfile> {
late String name = '';
late String email = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.blue])),
height: MediaQuery.of(context).size.height * 0.3
),
Card(
elevation: 20.0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
name = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: widget.user.name,
// add here
floatingLabelBehavior: FloatingLabelBehavior.always
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val){
email = val;
},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: widget.user.email,
// add here
floatingLabelBehavior: FloatingLabelBehavior.always
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: (){
print(widget.user.name);
print(widget.user.email);
setState(() {
widget.user.name = name;
widget.user.email = email;
});
},
child: const Text('Save'),
),
],
)
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(// Add AppBar here only
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
widget.user.name.toString(),
style: const TextStyle(
letterSpacing: 0.0,
fontSize: 20.0,
),
),
),
),
],
),
);
}
}

Try below code hope its helpful to you. add your ListView() inside Padding
Padding(
padding: EdgeInsets.all(20),
child: ListView(
children: <Widget>[
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val) {},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Name',
hintText: 'widget.user.name',
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 107, 106, 144),
width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
SizedBox(
height: 20,
),
SizedBox(
child: TextField(
autofocus: true,
onChanged: (val) {},
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(10.0),
labelText: 'Employee Email',
hintText: 'widget.user.email',
labelStyle: const TextStyle(
color: Color.fromARGB(255, 107, 106, 144),
fontSize: 14,
fontWeight: FontWeight.w500,
),
border: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromARGB(255, 107, 106, 144),
width: 2),
borderRadius: BorderRadius.circular(10),
),
),
),
width: 150.0,
),
TextButton(
onPressed: () {},
child: const Text('Save'),
),
],
),
),
Your Screen->

onPress not working inside of Postioned widget in flutter

Im trying to put some buttons and ListView inside of Stack with Postioined parameters.
All looks fine until i try to click on right arrow icon button to go close the page.
Its height and width are 48px (which has to be more than enought to click on it) but for some reason onPressed is working like its size is 2px.
How i could fix this issue?
Here is the code:
import 'package:flutter/material.dart';
class MobilePortraitProfile extends StatefulWidget {
#override
State<MobilePortraitProfile> createState() => _MobilePortraitProfileState();
}
class _MobilePortraitProfileState extends State<MobilePortraitProfile> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 10,
top: 40,
right: 50,
bottom: 670,
child: Text(
'Account Info',
style: TextStyle(color: Colors.white, fontSize: 28),
),
),
Positioned(
left: 295,
right: 3,
top: 27,
bottom: 660,
child: Container(
margin: EdgeInsets.all(6.5),
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color.fromRGBO(10, 196, 186, 1),
Color.fromRGBO(33, 211, 155, 1)
]),
),
),
),
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: IconButton(
icon: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
onPressed: () => Navigator.pop(context)),
),
Positioned(
top: 5,
right: 20,
left: 20,
bottom: 15,
child: Container(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: ListView(
shrinkWrap: true,
reverse: true,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Name/Surname",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Position",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Company",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextFormField(
validator: validateEmail,
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "e-mail",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Phone Number",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
].reversed.toList(),
),
),
),
),
],
),
);
}
}
String validateEmail(String formEmail) {
String pattern = r'\w+#\w+\.\w+';
RegExp regex = RegExp(pattern);
if (!regex.hasMatch(formEmail)) return 'Invalid e-mail adress format';
return null;
}

try this way, and put in at the bottom of stack tree,
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Container(
/// container is just to check the press area
color: Colors.yellow,
child: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
),
),
),