3

My screen have total 5 device partition size:- 1.Desktop 2.Small Desktop 3.Tablet 4.Small Tablet 5.Mobile, for that purpose i tried to use layout builder but while i'm resizing the size of display it's take too much time to render the design because it's trying to rebuild the design at every breakpoints.which is not expected in web design,is there any alteranative way to acheive smooth responsiveness in flutter web.

class CommunityListScreen extends StatefulWidget {
  static const String id = 'community_list_screen';

  const CommunityListScreen({Key? key}) : super(key: key);

  @override
  State<CommunityListScreen> createState() => _CommunityListScreenState();
}

class _CommunityListScreenState extends State<CommunityListScreen> {

  late double _deviceWidth;
  late double _deviceHeight;

  @override
  Widget build(BuildContext context) {
    _deviceWidth = MediaQuery.of(context).size.width - 150;
    _deviceHeight = MediaQuery.of(context).size.height;
    print(_deviceWidth);
    return Scaffold(
      backgroundColor: ColorAssets.themeColorLightGrey,
      body: Container(
        ///responsive builder
        margin: const EdgeInsets.only(top: 15.0),
        child: LayoutBuilder(
          builder: (context, constraint) {
            ///desktop size
            if (constraint.maxWidth >= 1200) {
              return desktop();
            } else if (constraint.maxWidth >= 1000) {
              return smallDesktop();
            } else if (constraint.maxWidth >= 800) {
              return tablet();
            } else if (constraint.maxWidth >= 600) {
              return smallTablet();
            } else if (constraint.maxWidth >= 300) {
              return mobile();
            }
            return Container(color: ColorAssets.themeColorLightPurple);
          },
        ),
      ),
    );
  }
}
Bhargav Dobariya
  • 43
  • 6
  • 2
    First, stop using MediaQuery please. Second, your build() methods should all be fast and idempotent, so there should be *no* network traffic as you resize, unless you're revealing an entirely new view of some new data, which should then still be cached for another rebuild. – Randal Schwartz Oct 16 '22 at 19:57
  • first of all thank you for your reply, i also thought same that it's lagging because of network traffic, to debug this i printed the device width, in the result device width also taking too much time.and also after printing the device width it's taking 3-4 seconds to show responsive design as per display width. – Bhargav Dobariya Oct 20 '22 at 06:13

1 Answers1

0

i found the exact issue,the time was taken by dottenline package which i used in my table format design, i removed this package and now the page rendering smoothly as per screen size.

Bhargav Dobariya
  • 43
  • 6