How to organise a Flutter project with multiple apps (Android, iOS and Web)?

2
votes

I'm trying to find the best way to organise a project that I'm gonna start with Flutter. Here is what I need to develop:

  • 1 Android & iOS app for customers-side
  • 1 Android & iOS app for professionals-side
  • 1 Web app for administration
  • Backend will be done with Firebase (Firebase Authentication, Firestore, ...)

Some code (models and logic) and features will be common on the three apps (and it would be nice if I could configure a production and a development environment).

How would you set up your project(s) in order to easily do that?

Does it seems like a good idea to have only 1 project with multiple flavors? I like the idea that I don't have to deal with multiple projects. Just to keep the development flow very simple. And There could be a condition in the main() function of the App that checks the flavor then open the right screen.

Would you prefer to have a common library that is used by multiple project? This seems like a good way to do it. But I'm not sure that this (small) project worth 3 to take the time to organise 3 distinct projects + a library.

Any other idea?

Thank you very much in advance

1
flutter
if that was my project, I use flavors but project size will be huge. I think the best choice is to make 3 separate projects and write your libraries - veneno

1 Answers

0
votes

You should be able to reshare the majority of your code without different projects.

This is the beauty of widgets and of MediaQuery.

Create all your main components in widgets, your list of items can be ItemList();, the main menu can be MainDrawer();, etc.

For widgets that are meant for differing screen sizes, in your layout builder you can either return LargeScreenWidget() or SmallScreenWidget().

Use either a LayoutBuilder or OrientationBuilder, and write the code to respond to changes in screen size, width and orientation. This way it can share most of the same code.

When you return your layout builder, follow the general pseudo code:

isLargeScreen 
? return Row(children[LeftWidget(), RightWidget()]) 
: return SingleChildScrollView(child: MobileWidget());

If somebody has a very small Chrome window on Desktop, it can switch to the mobile layout this way.

Just as a tidbit, I almost always start my code with the following so I can adapt the layout.

var size = MediaQuery.of(context).size;
var isLargeScreen = false;

if (MediaQuery.of(context).size.width > 900) {
  isLargeScreen = true;
} else {
  isLargeScreen = false;
}

This way when I am building a widget I can do like the following:

Container(
constraints: BoxConstraints(maxWidth: (isLargeScreen ? 700 : size.width * 0.9)),
),

You can also ask the user which operating system they are using with Platform.isIOS/isWindows/isAndroid.

EX:

onTap: () {
    Navigator.push(context, MaterialPageRoute(
        builder: (context) {
            return Platform.isIOS ? AndroidPage() : iOSPage();
          },
      )); // MaterialPageRoute
   },

Or when using a FutureBuilder

return Platform.isIOS ? CupertinoLoading() : CircularProgressIndicator();

On top of this, you can use VoidCallbackMethod with the OrientationBuilder to change the way the app functions.

In the articles I share, if the screen is small, it opens a Navigation route, otherwise it passes the data to a widget on the right side. This is good for a messaging app for example.

Here are some articles to help you out.

Develop A Responsive Layout Of Mobile App With Flutter

Developing for Multiple Screen Sizes and Orientations in Flutter

Of course, ultimately it is up to your project, what you and/or your team desires, and how comfortable you are with file-size/extra if statements running all the time.

However I will add, that at least for the mobile apps, I usually only use one project. Web/desktop may be a different project.

Happy fluttering!