Flutter – Pixels Overflow Error while Launching Keyboard
There is a very common pixel overflow error in Flutter whenever there are too many widgets in a Column and they are not able to display completely when Keyboard is opened, then these kinds of Pixel Overflow errors are received. Example :
The code for this UI is :
Dart
import 'package:flutter/material.dart' ;
import 'components.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
GFGLogo(),
SizedBox(height: 50),
MyTextField(label: "username" ),
SizedBox(height: 15),
MyTextField(label: "password" ),
SizedBox(height: 15),
MyTextField(label: "confirm password" ),
SizedBox(height: 50),
MyButton(),
],
),
),
),
);
}
}
|
Solution :
The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView. Also, wrap the SingleChildScrollView with Center so that the entire UI is centered. After that, it will all work just fine and there will be no overflow errors.
Dart
import 'package:flutter/material.dart' ;
import 'components.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
GFGLogo(),
SizedBox(height: 50),
MyTextField(label: "username" ),
SizedBox(height: 15),
MyTextField(label: "password" ),
SizedBox(height: 15),
MyTextField(label: "confirm password" ),
SizedBox(height: 50),
MyButton(),
],
),
),
),
),
),
);
}
}
|
Output:
Last Updated :
31 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...