Site web flutter

Flutter
1

Bonjour à tous et à toutes.

Je suis actuellement en train de créer un site en utilisant Flutter à 100%. Je me posais plusieurs questions :

  • Est-ce une pratique viable ?
  • Avez-vous des conseils concernant le responsive ? (pour éviter d’avoir à ajouter des media queries partout et de surcharger le code)

Merci d’avance pour vos retours, et si vous avez d’autres conseils, je suis preneur. :grin:

Merci.

2

Bonjour @julien.t ,

J’ai fait un site internet il y a peu pour un back-office. Il n’y a donc pas besoin de SEO pour le référencement. A priori, le référencement serait un peu compliqué avec Flutter, amis je ne peux pas t’en dire plus, je ne suis pas trop spécialiste de cela.

Concernant l’aspect responsive. Je me crée un petit widget « Responsive » et chaque page retourne ce widget.

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget desktop;
  final Widget? tablet;
  final Widget? mobile;

  const Responsive({Key? key, required this.desktop, this.tablet, this.mobile})
      : super(key: key);

  static bool isMobile(BuildContext context) {
    return MediaQuery.of(context).size.width < 800;
  }

  static bool isDesktop(BuildContext context) {
    return MediaQuery.of(context).size.width > 800;
  }

  static bool isTablet(BuildContext context) {
    return MediaQuery.of(context).size.width >= 800 &&
        MediaQuery.of(context).size.width <= 1200;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1200) {
          return desktop;
        } else if (constraints.maxWidth <= 1200 &&
            constraints.maxWidth >= 800) {
          return tablet ?? desktop;
        } else {
          return mobile ?? desktop;
        }
      },
    );
  }
}

Quand tu construit une page, elle peut ressembler à ça:

class Homescreen extends StatefulWidget {
  const Homescreen(this._viewmodel, {super.key});

  final IHomescreenViewmodel _viewmodel;

  @override
  State<Homescreen> createState() => _HomescreenState();
}

class _HomescreenState extends State<Homescreen> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Responsive(
        desktop: _desktopHomescreen(),
        tablet: _tabletHomescreen(),
        mobile: _mobileHomescreen());
  }

  Scaffold _desktopHomescreen() {
    return Scaffold(
        body: ...)

Du coup, pour chaque page je fais 2 (desktop, mobile) ou 3 (desktop, tablet, mobile) widgets. Cela me permet d’organiser les choses pour les différentes tailles d’écrans.

En espérant répondre en partie à ta question.

Benoit

3

Salut @Behache ,
Merci pour ta réponse. J’avais également pensé à créer un widget pour chaque taille d’écran, mais je ne savais pas si c’était une bonne pratique en termes d’optimisation. Je vais m’en inspirer.
Merci beaucoup.

4

Effectivement Flutter fonctionne très bien pour des web app et je m’en sers pour 2 apps et tout le monde est ravi.

Pour l’organisation des tailles d’écrans c’est forcément un peu compliqué mais la proposition de @Behache est une bonne solution si les écrans sont radicalement différents (par contre je te conseille d’utiliser des sous widgets au lieu de sous fonctions pour des raisons de performances).

Pour des petites modifications, tu peux garder une vue commune et utiliser des media queries ou des widgets LayoutBuilder.

Et ensuite tu peux utiliser des widgets plus souples comme le Wrap qui peut résoudre beaucoup de tes soucis :wink:

Happy coding!

1 « J'aime »