0

I make responsive UI design in flutter. Then I debuged it in my android emulator. First orientation was portrait and It was a good. Then I changed Orientation and it was a bad UI which isn't expected. If I hot restart or hot reload UI changed that is came expected. I have to reload or restart always after changing orientation. Settings already made to autoreloading after save. How to resolve this issue?

Royal
  • 1
  • 1

2 Answers2

1

You need to make your UI responsive. You can do it with the "MediaQuery". Exemple :

return Scaffold(
  appBar: AppBar(
    title: Text("Responsive Container"),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          height: MediaQuery.of(context).size.height/ 4,
          width: MediaQuery.of(context).size.width/3,
          color: Colors.red,
          child: Center(child: Text("Hello There !")),
        ),
      ],
    ),
  ),
);
Rouatbi Daly
  • 76
  • 1
  • 7
0

Yuu said that you are creating responsive UI which means that you are using width and height of the screen to make it responsive. When orientation changes then obviously width increased and height decreased so maybe you need to add check on orientation change. There are many ways of doing that here is the simple one

return Scaffold(
        key: scaffoldKey,
        body: OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            orientation == Orientation.portrait ? 
                      doSomeThingifportrait : doSomethingifLandscape;
          },
        ),
);
Arslan Kaleem
  • 1,410
  • 11
  • 25
  • I already used this. Problem has when changing orientation UI change very bad. Such as fonts are very small, buttons are expanding. But again restart or reload in that orientation UI make good. Again change orientation will have same issue. – Royal Oct 20 '21 at 10:10