flutterdevzim/responsive-architecture

ultimate responsive ui architecture for flutter applications

responsive-architecture

ultimate responsive ui architecture for flutter applications

• inspired and copied from filledstacks
• watch video here

Abstract example

import 'index.dart';

List<Widget> _children = <Widget>[
                          Text('I'),
                          Text('love'),
                          Text('flutter'),
                          Text('dev'),
                          Text('zim'),
                          ];
                       
// mobile    
Widget _mobilePotrait   = Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: _children,);
Widget _mobileLandscape = Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: _children,);

// tablet
Widget _tabletPotrait   = Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: _children,);
Widget _tabletLandscape = Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: _children,);

// desktop
// (...)

Widget myResponsiveWidget() {
  // return appropriate widget based on device
  // screen layout
  return ScreenTypeLayout(
      mobile: OrientationLayout(
        portrait: _mobilePotrait,
        landscape: _mobileLandscape,
      ),
      tablet: OrientationLayout(
        portrait: _tabletPotrait,
        landscape: _tabletLandscape,
      ),
    );
}

Plugin for testing ui responsiveness

• device_preview plugin
• device_simulator plugin

Other approaches

• responsive_widgets plugin
• auto_size_text_field plugin
• flutter_screenutil plugin
• responsive_framework plugin
• relative_scale plugin