Flutter , how to make the app looking similar in mobile and tablet (i.e eg we can use white spaces from left and right in tablet)

Question

I want my app to remain similar as it is in mobile . I want to add white spaces from left and right in tablet so that it doesnot create any mess and look similar to the mobile . I have tried layout builder to do that but in that case i need to edit every screen and every class of my project i am searching for something else which can be applied on one place only leading to add white space margins from left and right in the tablet so that the screen size remains same as to that of mobile .

Answer 1

You can achieve that with LayoutBuilder. The MainContentWidget is the main content widget. You render the main content widget if the screen width is less than 600 otherwise you specify the content width which by the sample code provided below is 60% of the screen then position it at the center.

Container(
    constraints: BoxConstraints.expand(),
    color: Theme.of(context).scaffoldBackgroundColor,
    child: LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 600) {
          return MainContentWidget();
        }

        return Center(
          child: SizedBox(
            width: MediaQuery.of(context).size.width * 0.60,
            child: MainContentWidget(),
          ),
        );
      },
    ),
  )