Refonte de la page d’accueil de l’application Safaricom à l’aide de Flutter

Posté Par: Windows2022tutosur: décembre 24, 2022Dans: TechPas De Commentaires

Pour Célébrer Cette Saison Festive 🎊🎉🎁

J’ai conçu la page d’accueil de l’application Safaricom telle qu’elle était depuis le 21 décembre 2022 en utilisant Flutter. L’interface utilisateur de l’application Safaricom a très probablement été construite à l’aide de React Native, mais j’ai décidé de la concevoir en utilisant Flutter et de la rendre aussi proche de l’application actuelle que possible pour les icônes et les couleurs.

Fonctionnalités impressionnantes 😎👍🏽

1. Vue de défilement personnalisé

Il s’agit de la vue de défilement de Flutter qui permet la création de contenu déroulant. La page d’accueil comporte un CustomScrollView qui permet de faire défiler le contenu du corps

2. Éclats

Un ruban n’est qu’une partie d’une zone de défilement. Flutter contient des Slivers pour créer des listes, des grilles, des barres d’applications et des widgets de famille de boîtes enfant uniques. Les exemples sont

SliverList
SliverGrid
SliverAppBar
SliverToBoxAdapter

3. SliverAppBar

Il s’agit d’une barre d’application dotée de fonctionnalités de défilement et permettant à la barre d’application d’avoir un arrière-plan à l’aide de la FlexibleSpaceBar widget qui va de pair avec le expandedHeight la propriété. Le FlexibleSpaceBar prend un arrière-plan en tant que propriété qui est ensuite utilisée pour concevoir l’arrière-plan de la barre d’application. L’arrière-plan de la barre d’application aura des animations à afficher et à disparaître lors du défilement.

4. Faire flotter un bouton au-dessus de la marge inférieure de la SliverAppBar

Le SliverAppBar a une propriété appelée bottom qui est utilisé pour définir une barre d’onglets inférieure. Dans ce cas, je l’ai utilisé avec le Transform.translate() décaler un bouton, (View My Balances) bouton, à partir du SliverAppBar et faites-le flotter au-dessus du SliverAppBarla marge inférieure. 😎

5. ScrollController et NotificationListener

La barre d’applications de l’application Safaricom a un titre qui est centré lorsque la barre d’applications est développée. Le titre se déplace vers la gauche lorsque la barre d’application est réduite. Pour obtenir cet effet, un contrôleur de défilement est réglé sur la CustomScrollView. Un écouteur d’événement est l’ensemble du CustomScrollView qui surveille l’état de la barre d’application. Lorsque la barre d’application est réduite, le centerTitle La propriété booléenne est définie sur false et le titre est aligné à gauche et au centre lorsque la barre d’application est développée.

6. SliverToBoxAdapter

j’ai utilisé un SliverToBoxAdapter pour rendre un conteneur enfant unique dans le cadre d’un ruban. Encore une fois, un ruban est une partie d’une zone de défilement et donc un flottement ordinaire Containers ne sont pas défilables. Pour avoir un conteneur dans une zone de défilement de sorte qu’il défile avec le contenu, un SliverToBoxAdapter est enroulé autour du Container widget

7. Hors scène

J’ai emballé le premier conteneur publicitaire avec un Offstage widget qui permet de fermer l’ensemble du conteneur publicitaire lorsque le bouton de fermeture X est tapé. Réglez simplement le offstage propriété de la Offstage widget sur true pour supprimer le widget du element et renderObject des arbres

8. Forfait Flutter Carousel Slider

Suis un package génial et bien entretenu pour créer des carrousels flottants. La documentation complète est disponible ici 👉🏽 Curseur de carrousel flottant