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 :
import 'package:flutter/material.dart' ;
import 'components.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@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.
import 'package:flutter/material.dart' ;
import 'components.dart' ;
void main() {
runApp( const MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@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: