Try below code hope its help you. I have do some extra configuration.
```
TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (value) {
if (value == null || value.isEmpty) {
return "Enter email or phone to continue";
} else if (model.isPhone && value.length != 10) {
return "Enter a valid 10-digit phone number";
} else if (!model.isPhone &&
!RegExp(r"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")
.hasMatch(value)) {
return "Enter a valid email address";
}
return null;
},
controller: model.emailOrPhoneTEC,
focusNode: phoneFocusNode,
onChanged: (value) {
final isPhone = RegExp(r'^[0-9]+$').hasMatch(value);
if (model.isPhone != isPhone) {
setState(() {
model.isPhone = isPhone;
});
}
if (isPhone) {
model.mobile = value;
model.email = '';
} else {
model.email = value;
model.mobile = '';
}
},
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Phone / Email",
hintStyle: TextStyle(
color: Colors.grey[700],
),
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14),
prefixIcon: model.isPhone
? Padding(
padding: const EdgeInsets.only(left: 12, right: 4),
child: Text(
'+91',
style: TextStyle(fontSize: 16),
),
)
: null,
prefixIconConstraints: BoxConstraints(minWidth: 40, minHeight: 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(color: Colors.grey),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(color: Colors.blue),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: BorderSide(color: Colors.red),
),
),
),
```
Result-> [](https://i.sstatic.net/cWz4BuDg.png)
Consider using a `Row` instead of `Column`
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: TextFieldExample(),
),
),
);
}
}
class TextFieldExample extends StatefulWidget {
@override
_TextFieldExampleState createState() => _TextFieldExampleState();
}
class _TextFieldExampleState extends State<TextFieldExample> {
final _formKey = GlobalKey<FormState>();
String email = '';
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 5),
padding: EdgeInsets.symmetric(horizontal: 15),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(29)),
child: Form(
key: _formKey,
child: Row(children: <Widget>[
Flexible(
child: TextFormField(
validator: (value) => value.isEmpty ? 'Enter an email' : null,
onChanged: (value) {
setState(() => email = value);
},
decoration:
InputDecoration(icon: Icon(Icons.person), hintText: "Email"),
),
),
Expanded(
flex: 0,
child: Container(
margin: EdgeInsets.symmetric(vertical: 5),
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: RaisedButton(
padding: EdgeInsets.symmetric(vertical: 10),
onPressed: () async {
if (_formKey.currentState.validate()) {
//sign in;
}
},
child: Text("Login")))),)
]),
),
);
}
}
