How do we increase the size of the text form field size in a Flutter app?
We need to increase the size because we’ve been building a Flutter Firebase, Provider web app where users write blogs.
As a result, as an interface, on the screen users must give some inputs through the TextFormField.
However we’re not happy with the default design of the TextFormField.
For that reason we need to tweak the code and find a solution where the size of the title field is small.
But the size of the TextFormField where users will write the content, will be bigger than the title field.
Initially it looked as follows.
As we see both the TextFields look the same. In addition, they are not user friendly.
Therefore we want to make them look as follows where the TextField for content will be bigger than the title field.
Certainly it looks better than before, all the same we can make it more attractive.
The interesting part of this TextFormField is when users tap in, it changes its border color from green to blue.
Not only that, it also changes its shape.
As a whole it gives a rich user experience.Before discussing how we do that, let’s see some key concepts of a TextFormField.
Does the text form field flutter size vary?
Can we vary the size of the text form field flutter?
Is there any kind of in-built properties that will help us in achieving this goal?
A TextFormField is a FormField that contains a TextField.
Why do we need this widget?
To give some inputs to the flutter app.
How does it work? What are the basic principles?
Firstly, it’s a convenience widget that wraps a TextField widget in a FormField.
Although we don’t always need a Form ancestor, in our case, we have a Form ancestor.
Why?
Because the Form ancestor makes it easier to save, reset, or validate multiple fields at once.
We have done exactly the same. Because we have multiple fields like title and body of a blog. Right?
Secondly, if you plan to use the TextFormField without the Form ancestor then you can pass a GlobalKey to the constructor and use GlobalKey.currentState to save or reset the form field.
Let’s see our code that will explain this further.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import '../controller/all_widgets.dart';
import '../controller/authenticate_to_firebase.dart';
import '../model/state_of_application.dart';
class LetUsChatMessage {
LetUsChatMessage({
required this.name,
required this.title,
required this.body,
});
final String name;
final String title;
final String body;
}
class LetUsChat extends StatefulWidget {
const LetUsChat({
required this.addMessageOne,
required this.messages,
});
final FutureOr<void> Function(String messageOne, String messageTwo)
addMessageOne;
final List<LetUsChatMessage> messages;
@override
State<LetUsChat> createState() => _LetUsChatState();
}
class _LetUsChatState extends State<LetUsChat> {
final _formKey = GlobalKey<FormState>(debugLabel: '_LetUsBlog');
final _controllerOne = TextEditingController();
final _controllerTwo = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Provider Firebase Blog'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: _controllerOne,
decoration: InputDecoration(
hintText: 'Title',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: const BorderSide(
color: Colors.green,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: const BorderSide(
color: Colors.purple,
width: 2.0,
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Enter your message to continue';
}
return null;
},
),
Expanded(
child: SizedBox(
height: 150.0,
child: TextFormField(
controller: _controllerTwo,
maxLines: 10,
decoration: InputDecoration(
hintText: 'Body',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: const BorderSide(
color: Colors.green,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: const BorderSide(
color: Colors.purple,
width: 2.0,
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Enter your message to continue';
}
return null;
},
),
),
),
const SizedBox(width: 10.0),
StyledButton(
onPressed: () async {
if (_formKey.currentState!.validate()) {
await widget.addMessageOne(
_controllerOne.text, _controllerTwo.text);
_controllerOne.clear();
_controllerTwo.clear();
}
},
child: Row(
children: const [
Icon(Icons.send),
SizedBox(width: 6),
Text('SUBMIT'),
],
),
),
for (var message in widget.messages)
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BlogDetailScreen(
name: message.name,
title: message.title,
body: message.body,
),
),
);
},
child: Paragraph('${message.name}: ${message.title}'),
),
],
),
),
),
);
}
}How did we increase the text form field in flutter? Simple. We’ve used a SizedBox Widget as its immediate parent and made the height property 150.
We’ve specified a TextEditingController that defines the initialValue.
In addition, the StatefulWidget as an ancestor manages the controller’s lifetime.
In our case, the same thing happens.
We’ve called TextEditingController.dispose of the TextEditingController. Because we no longer need it once users have typed in and press the submit button.
This will ensure we discard any resources used by the object.
Let’s see the code.
StyledButton(
onPressed: () async {
if (_formKey.currentState!.validate()) {
await widget.addMessageOne(
_controllerOne.text, _controllerTwo.text);
_controllerOne.clear();
_controllerTwo.clear();
}
},
child: Row(
children: const [
Icon(Icons.send),
SizedBox(width: 6),
Text('SUBMIT'),
],
),
),Apart from controlling the size, we can also decorate the text form field in flutter.
And that certainly adds a style statement to our Firebase, Provider web app.
We’ll discuss that topic in the next section.
Leave a Reply