A simple developer's journey

There are many ways to add a background image to your pages, but the most common way is to use a BoxDecoration Widget. The BoxDecoration Widget is placed under a parent Container Widget (container.decoration). Then, you can customise the Image decoration using Assets images, Network images... Sample code (with an asset image): @ override Widget build ( BuildContext context ) { return GetBuilder < MainPageController >( id : 'mainpage' , init : MainPageController (), builder : ( vm ) => Scaffold ( body : Container ( width : double . infinity , height : double . infinity , decoration : const BoxDecoration ( image : DecorationImage ( image : AssetImage ( 'assets/images/dark_background2.jpg' ), fit : BoxFit . fill , )), child : SafeArea ( top : true , bottom : true , child : Container (

I'm sure, if you are a Flutter's developer, that you will need one day to get specific paths, for instance to store files, generate temporary files etc... Path_provider package For that I use the 'path_provider' package that has some helpers methods. For example: Future < Directory >   getApplicationDocumentsDirectory ( ) returns the documents directory. How to use it ? Directory tempDir = await getTemporaryDirectory(); String tempPath = tempDir.path; Directory appDocDir = await getApplicationDocumentsDirectory(); String appDocPath = appDocDir.path; Follow the links: Package:  https://pub.dev/packages/path_provider Package's documentation:  https://pub.dev/documentation/path_provider/latest/index.html

As applications are actually spread around the world, a common task to implement when developing your app (mobile, web or desktop), is to setup a multi-language option .  In Flutter, it can be done easily with the GetX Package (a useful package that provides a lot more services ! You should take a look if you don't know this package:  GetX package on pub.dev . The implementation steps are the following: 1-Add GetX package to your solution You can do it the traditional way you like. For instance with "Pub Assist" extension: Shift+CMD+P > Pub asssist: add/upgrade > get 2-Use a GetMaterialApp Important step, do not forget to use the GetMaterialApp classe instead of Flutter's MaterialApp: @ override Widget build ( BuildContext context ) { return GetMaterialApp ( 3-Add a translation file Next you have to add a class that will embed all your strings declaration / translations. This class must extends the GetX's Translation class. Here is an example:

Here is a list of useful Flutter's commands / tips when you start developing with (in progress...). ( To find a topic try to search a keyword on this webpage... will be updated through time ) Create a new project in visual Studio Code >  CMD + Shift + P to display action palette > flutter: New project Update Flutter to the latest version >  flutter upgrade Check actual Flutter version >  flutter --version Flutter change of (git) channel (master, dev, beta stable) >  flutter channel beta > flutter channel master > flutter pub cache repair //To perform a clean reinstall of the packages in your system cache, use pub cache repair > flutter clean //flutter clean will delete the /build folder Activate / Deactivate web support for a project >  flutter config --no-enable-web >  flutter config --enable-web Disable "debug banner" (MaterialApp's debugShowCheckedModeBanner) // This widget is the root of your application. @ override Widget buil

The splash screen is the first screen you see when you start your app. - you can display your logo for instance - and while the splash screen is shown,  your application is loaded (like user data, business data...) In this example we will use flutter_native_splash package. I- Package: flutter_native_splash (for native splash screen) In your " pubspec.yaml " file you have to add the correct dependency, here at less version 2.0.5 # Dependencies specify other packages that your package needs in order to work. # To automatically upgrade your package dependencies to the latest versions # consider running `flutter pub upgrade --major-versions`. Alternatively, # dependencies can be manually updated by changing the version numbers below to # the latest version available on pub.dev. To see which dependencies have newer # versions available, run `flutter pub outdated`. dependencies : flutter : sdk : flutter flutter_native_splash : ^2.0.5 hint : Pubspec Assist extension To auto

  iOS 15, transparent TabBar Since the release of iOS 15, some people had regression with their app, particularly because of the TabBar component . In iOS 15, by default (while using Xamarin Forms), the TabBar comes with a Transparent background and the page's content can scroll behind this TabBar. So it's not user friendly  and I presume for all existing apps, it's not beautiful. See the next picture: iOS 15, transparent TabBar You can solve this problem by many ways, but the fastest solution / workaround that I found is the following: => manage iOS SafeArea directly into your XAML to constrain page's content to fit the free space of the page.  You can do that in XAML in 2 lines of code: <?xml version="1.0" encoding="UTF-8" ?> <ContentPage xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" ios:Page.UseSafeArea="True" ... iOS 15 using Page.UseSafeArea = true As Ta

I already talk about the really convenient and powerful lib FFLoadingImage for Xamarin Forms (here: FFLoadingImage for Xamarin Forms (quick overview) ).  This library gives you a lot of tools to display and manage your application's pictures. Loading pictures from a shared assembly You can load pictures from different sources like:  - an HTTP Url  - An iOS or Android embedded resource picture. In this case you will need to duplicate the pictures for each specific platform project.  But did you know that you can also load images from a custom assembly like a SHARED Xamarin Forms assembly ?  It's pretty simple: Set your picture's build action to: Embedded Resource Shared assembly containing your pictures Picture's build action: Embedded Resource Then use the following syntax In your xaml file where you want to display the picture, just use the following syntax. FFLoadingImage library will do the rest to load and display correctly images for each native platforms: