When you write your Flutter app you probably want to target both iOS and Android. Flutter-view styling can make this easier for you, using the standard tools from CSS, Pug and Sass.
flutter-view.json in the root of your Flutter project.
.fooslot.ios(if='isCupertino')...iOS layout here....android(if='isMaterial')...Android layout here...
.foo.ios// ios layout styling here.android// android layout styling here
The above will render different layout depending on the phone OS you run it on. Since we are adding a different class, we can also add different styling through CSS.
A very common situation is that we have the same basic layout, but want to use different CSS styling per layout. We could do the same as above:
This will work, we can apply different styling for .bar.ios and .bar.android. However we are repeating ourselves in the layout. This can be quite redundant.
Instead, we can let Pug mixins help us. We can make a default.pug in our project that multiple view pugs can import. Then in this pug we can write a mixin:
We can then import this tool into our view and use it like this:
.foo.ios.some// ios layout styling here.android.some// android layout styling here
Now we have no repetition in our layout!
However, there is a downside: the generated pug will not know what source code line it came to, and as a result, you will not get the source reference comments in the generated Dart. This means that in VSCode, the flutter-view extension hotlinking will not work for these lines.
Note: kudos for Floris van der Grinten for this nifty solution