mercredi 9 mars 2022

[Flutter] Adding background image to your pages

mars 09, 2022 Posted by Djooleean , , , , No comments

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(



[Flutter] Get some special directories path

mars 09, 2022 Posted by Djooleean , , , , , , No comments


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





dimanche 6 mars 2022

[Flutter] Translations, internationalisation with GetX package

mars 06, 2022 Posted by Djooleean , , , , , , No comments

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:

class AppTranslations extends Translations {
@override
Map<String, Map<String, String>> get keys => {
// --------- ENGLISH ----------
'en': {
'Title': 'My title (EN)',
'CustomMsg': "This is an english message",
},
// --------- FRENCH ----------
'fr_FR': {
'Title': 'Mon titre (FR)',
'CustomMsg': "C'est un message en FR",
}
};
}

The class contains a map of Language, List of translations <key: translation>.


4-Setup the localisation in your GetMaterialApp

Some localisation's parameters are available from the GetMaterialApp class. This is where you have to link the app with your own translation class:

@override
Widget build(BuildContext context) {
return GetMaterialApp(
// !! GetMaterialApp
translations: AppTranslations(), // <------ set your app translation class
fallbackLocale: const Locale('en'),
locale: Get.deviceLocale, //const Locale('fr'),

You can notice the GetX helper:

- Get.deviceLocale => returns the current system Locale object


5-Use translations in your code

> for a simple translation, use '.tr' property:

title: 'Title'.tr,

> for a translation with parameters

import 'package:get/get.dart';


Map<String, Map<String, String>> get keys => {
    'en_US': {
        'logged_in': 'logged in as @name with email @email',
    },
    'es_ES': {
       'logged_in': 'iniciado sesión como @name con e-mail @email',
    }
};

Text('logged_in'.trParams({
  'name': 'Jhon',
  'email': 'jhon@example.com'
  }));


Take a look at the official documentation:

https://pub.dev/packages/get#using-translations



[Flutter] Useful commands and tips

mars 06, 2022 Posted by Djooleean , , , , No comments


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 build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,


Using SafeArea (is simple !)

In your Widget, just use the SafeArea Widget as child:

builder: (vm) {
return SafeArea(
top: true,
bottom: true,
...




 

jeudi 3 mars 2022

[Flutter] Splashscreen (native way)

flutter_native_splash


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 automatically add a package to your project, you can use the extension "Pubspec Assist":

In Visual studio Code, install this extension:


Then type CMD+Shift+P / Pubspec assist: Add/update dependencies / type the package name

II- Splash screen configuration

In your 'pubspec.yaml' add splash screen configuration (at the root). Here are the possible properties you can configure for the splash screen:

# to update (in termninal): flutter pub run flutter_native_splash:create
# flutter_native_splash: ^2.0.5
flutter_native_splash:
color: "#42a5f5"
#background_image: "assets/images/dreamsounds.png"
#image: "assets/images/logo.png"
# dark mode
#branding_dark: assets/dart_dark.png
color_dark: "#042a49"
#background_image_dark: "assets/dark-background.png"
#image_dark: assets/splash-invert.png


Dark theme properties

You can also configure the splash screen for dark mode using the 'dark' keywords

(color_dark, image_dark, branding_dark, background_image_dark)


III- output sample







mercredi 15 décembre 2021

XAMARIN FORMS TIPS: iOS 15 Transparent TabBar and Safe Area

décembre 15, 2021 Posted by Djooleean , , , , , No comments

 

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 TabBar is transparent, you will see the color of the page behind it. So if you use theming, the color will be updated automatically.


dimanche 12 décembre 2021

FFImageLoading - display pictures stored in shared assembly

décembre 12, 2021 Posted by Djooleean , , , , No comments


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:

  


              <FFimg:CachedImage
                  x:Name="uiLogoImage"
                  DownsampleToViewSize="true"
                  Source="resource://MyProject.Assets.Pictures.Image1.png"
                  VerticalOptions="Center"
                  WidthRequest="26"
                    />



Pretty easy no ? :)


mercredi 1 septembre 2021

Xamarin Forms + Installing Firebase plugin = errors

septembre 01, 2021 Posted by Djooleean , , , , , , No comments

[Xamarin Forms Shell App + Firebase iOS Auth plugin v. 6.9.2]

Last day I added the Google Firebase functionalities to my project, but unfortunately I add some errors just after installing the Firebase Plugin.

> Xamarin Forms (Shell app) + iOS Firebase errors adding latest package:

....iOS/MTOUCH: Error MT5210: Native linking failed, undefined symbol: _GULIsLoggableLevel. Please verify that all the necessary frameworks have been referenced and native libraries are properly linked in. (MT5210) (*.iOS) 

Xamarin forms + Firebase iOS error







I found some solutions, and finally the iOS SDK worked with my Xamarin Forms Shell app... Unfortunately, with Xamarin Forms, we still take too much time to solve this kind of problem. 
What did I do ?

iOS project properties

=> Set the "entitlements file property" to a default file (the *.plist file can be empty):

ios xamarin forms firebase error entitlements plist file



=> iOS Build options:

- Add 'mtouch' argument: --registrar:static
- and try to set linker behavior to SDKs only


Then initialize Firebase in your code:

In your iOS 'appDelegate' file, you can initialize Firebase like that:

FinishedLaunching(UIApplication app, NSDictionary options)
{
	global::Xamarin.Forms.Forms.Init();
	
Firebase.Core.App.Configure();
...
}


==> Clean ALL then rebuild your project. It should be ok now.



mardi 2 avril 2019

Docker for beginners - presentation

avril 02, 2019 Posted by Anonyme , , , , , , No comments

I- Introduction
II- Docker presentation
III- A simple [MySQL / phpMyAdmin] docker example
IV- Docker in Windows, how to ?
V- Simple Docker glossary
VI- Links


I- Introduction


There are enough websites to introduce to you Docker in detail. This presentation will just remind you the key concepts of Docker. In my posts, I will always talk about Docker embedded in the Windows environment but I presume, all given information will also be valid for Linux and other OS.

So, what are we going to see in this post ?
As I said, we will remind the key concept of Docker, then we will list some common use cases and all the basic related commands. I will share some links at the end of the post if you want to go deeper with Docker. Let's go !


II- Presentation


Docker is 'just' a technology used to virtualize environments (named containers) in order to run specific applications. It acts like traditional virtual machine but it's much more lightweight. Take a look at the following diagram:
- Both VMs and containers will be installed on a (dedicated) machine. For Docker, we talk about a Docker machine.  In my case, I will use a Windows PC. Docker engine will (after being installed as we will see just after), comes in place of the traditional Hypervisor.

- Over the 'Docker engine' layer, we will setup containers. Containers are isolated spaces that contain only libraries used to execute wanted applications or services. So it's much more lightweight / easy to configure. You don't need to install a full OS anymore.

- In a container, you can install applications (like MySql) or services (like nodejs). To install wanted applications, you will surely use Docker images. There are already many available images on Docker hub website (see links at bottom).


III- A simple [MySQL / phpMyadmin] docker example


Scenario 1: using a MySQL database

Imagine, you are working on a project (a Windows one) that use a database like MySQL.
To setup / test your application you have several possibilities:

- you own a remote Linux server that you can use to install a MySQL instance on. So you have to configure your server, then install MySQL then you need to restore Dumps and configure it to be accessed from the outside.

- you can do the same with a cloud service like Azure

- or you can install on your Windows development machine, something like a WAMP server, then configure it.

You will need to do something like that:
Using a Linux Server (can be a Virtual Machine)


>> You can see that:
- you need to get access to a Linux server (it can be a virtual machine)
- there are many (traditional) steps to setup, configure, securize, backup your server and SQL instance.
- then your development environment must have access to this Linux server. Sometimes, it's not so obvious because of network configuration...

Here is what you can get with Docker:

Using Docker containers on Windows

>> Now you can see that you just need one environment:
- it's faster to setup
- but it's also faster to backup if needed
- Containers need less resources than a traditional VM.
- Pre requisite is to install Docker engine



Scenario 2: managing your Database with phpMyAdmin

Ok that's cool, but I need to manage my Database. In Docker, you still have several possibilities to do that, like on a real Linux server:
- using a batch composing your SQL commands
- or using a tool like phpMyAdmin

Using MySQL batch

docker exec -it expdb_db_1 mysql -u root -p




This simple command enables you to type your SQL Commands from a command prompt. Note how we connect to the 'MySQL container' using "docker exec"...


Installing a new container: PhpMyAdmin

But you can also install a new docker container with PhpMyAdmin !
It's really fast and  you just have to configure it to target the existing MySQL database.
Adding new container: PhpMyAdmin

And,  in a very few steps, we get access to our MySQL database using a new container:

phpMyAdmin container installed in a few clicks


IV- Docker in Windows, how to ?

Download Docker for Windows

Using Docker in Windows is pretty easy. The first step is to install Docker Engine on your machine. For that you can go directly here, every steps are well explained (package size about 500Mb):
>> https://hub.docker.com/editions/community/docker-ce-desktop-windows

Docker engine installed

Docker service running on Windows

Docker Hub

Then you can create an account on Docker Hub, the entry point for all your Docker's images:
>> https://hub.docker.com/




Getting started guide

Then follow this "Getting started" guide:
>> https://docs.docker.com/docker-for-windows/



Kinematic client to manage your containers

There is a Windows tool to manage your container. It's the Docker Toolbox called Kinematic:

Kinematic - Docker Toolbox


V- Simple Docker Glossary

Here are a few words you will always see going deeper into Docker.


Docker machine:
This is the host machine for the Docker engine. You will install your containers on this machine

Docker Image:
An image represent an application / service you want to install as a Docker container. Image embed minimum required libraries in order to make you application executable.

Container:
The container is an (configured) instance of a given image on your Docker machine.

Docker file:
This is a file grouping a set of commands needed to generate a container from a given Docker image.

Docker-compose:
It is a tool that you will surely use later, to define and execute multiple containers. These containers can "communicate" so Docker-compose also enables you to configure containers networks and volumes to store shared data.
When your compose file is set up, you just need one command to execute all of your configured containers.


More, more, more... here: https://docs.docker.com/glossary/


VI- Links


(FR) Good introduction: 
https://bacarybruno.me/docker-premieres-impressions/

Docker hub image repository: 
https://hub.docker.com/search?q=&type=image

Official Docker configuration:
https://docs.docker.com/get-started/

Kinematic (client to manage your containers):
https://kitematic.com/

Docker compose:
https://docs.docker.com/compose/



So that's it, now you can go deeper into Docker ! 😎💨



vendredi 25 mai 2018

Understanding .NET Standard

mai 25, 2018 Posted by Djooleean , , , , , , , No comments


If as me, you don't really understand all subtleties between .NET Core and .NET Standard, I suggest you to have a look at the following article.
It explains some history about .NET Framework and how .NET Standard is born.



Which version to use ?

For me, an important point to master for my own projects, is to know which platforms I can reach with a specific .NET Standard or .NET Core library. The following table illustrate the compatibility between each .NET implementation:




For instance,

  • - if you build a Xamarin Android v. 7.0 application, you could use versions 1.0 up to 1.6 .NET Standard librairies into your project


  • - or if you have a .NET Standard v. 1.4 library, you could only build Android  v. 7.0  applications ( not v. 8.0)


Intersting References about .NET Standard:

Xamarin blog: A brief history of .NET Standard

.NET Standard official website

.NET Standard, table version video

Convert shared or PCL project into .NET Standard one