Simply Responsive

Hello guys, so I just published my first open source library for flutter.

This is a mobile-first widget to help us build a responsive app across mobile, tablet, and desktop with ease. Unlike the CSS 12 grid system, The design of simply_responsive is based on 3-columns design of a desktop website. This has an advantage of being simpler to use than the CSS 12 grid system, at the cost of reduced possible flexibilities. I try to make this library as tested as possible.

And, since it's responsive, it'll be no need for you to lock the orientation of your app to portrait only!

Example

SimplyResponsiveBody(
  LayoutConfig.build(MediaQuery.of(context).size.width),
  leftChild: ListView(
    children: [
      Text('Home'),
      Text('Profile'),
      Text('Sign Out'),
    ]
  ),
  centerChild: ListView(
    children: [
      Text('Lorem Ipsum'),
      Text('Lorem ipsum dolor sit amet')
    ]
  ),
  rightChild: ListView(
    children: [
      Text('Tap to like')
      Text('Tap to dislike')
    ]
  )
)

Just by writing that code, you can make it responsive across screen sizes and orientation.

Basically, the centerChild is the widget which will appears everytime (although not required).

The left column is usually used to display navigational menus. On this early release, the widget will just hide the left column if the screen is not enough (usually in mobile portrait). You should put it in the drawer if that's the case.

The right column is usually used to display additional content (Like Editor Basics on DEV). On this early release, the widget will just hide the right column if the screen is not enough (usually in mobile portrait and tablet if left column is visible). You should put it in the endDrawer if that's the case.

There's also a two-column mode if you pass centerFlex to 0, and set the centerChild to null.

Feel free to ask any question and give any criticism and suggestion! Thank you.

https://pub.dev/packages/simply_responsive