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

Comments

[Thomas Bnt ☕]

Hey 👋🏼

This looks like a good post here. Can you share this in full on DEV?

DEV generally asks that folks share their posts in full if possible and there is tooling provided to make it so that it's relatively easy to repost from outside blogs.

Hope you'll consider sharing the full post going forward.

[Moses Karunia]

Thanks for the suggestion. I've added some more details.

[Thomas Bnt ☕]

Nice 💪🏼