Fixed: Size problem in flutter

Hello flutter dev’s, this blog is about the Fixed: Size problem in flutter. As we know flutter is all about widgets. From all of these widgets in the previous blog, we discussed the Flutter row and column widget. But while practicing these widgets we came across an issue. This issue is about the Sizing issue of widgets. Lets us see what is the actual sizing issue?

Size problem of widgets

The most important note is that Row and column widget works with the visible available part of screen. And if they exceed the visible available space then a yellow and black striped pattern appears on the edges. You can have this issue with horizontal main aix or vertical main axis. Then don’t worry this error is nothing but a warning. This warning tells you to adjust your widgets. In short, it says if your widgets are more than 3 then use ListView or if your widgets are 3 or less than 3 then adjust widgets size.

Expanded widget

This is the solution for the above warning. An expanded widget simply allows you to adjust and fit the widgets according to the visible size. It divides the widgets according to the flex factor.

Constructor:

Expanded({

Key key,

int flex: 1,

@required Widget child

})

It expands the child widget that can be arranged according to the widget’s main axis. Remember it has a @required parameter which means it has to be included.

Code:

import ‘package:flutter/material.dart’;
void main() {

runApp(MyApp());

}
class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: ‘Flutter Demo’,

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(title: ‘Flutter Row Layout’),

);

}

}
class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: ,

),

),

);

}

}

Following screen shows how the error appears on the app:

Size problem in flutter

Here is the solution that Fixed: Size problem in flutter:

Fixed: Size problem in flutter

Here you can see, the ListView has 5 elements with a horizontal main axis. These 5 elements on the first screen show warning with yellow and black striped pattern edges. And when we add the above code for these elements. The yellow and black striped pattern edge is disappeared. Hence, we have Fixed: Size problem in flutter.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store