Articles de la série Flutter - Interface utilisateur Flutter avancée

Dans cet article, nous apprendrons en profondeur les compétences avancées de Flutter UI, couvrant les principes de mise en page, la mise en œuvre de l'animation, le dessin et les effets personnalisés, ainsi que l'utilisation des bibliothèques de composants Material et Cupertino. Grâce à des démonstrations pratiques, vous comprendrez mieux comment créer des interfaces utilisateur complexes et impressionnantes.

Partie 1 : Compréhension approfondie des principes de mise en page

1. Utilisation flexible des lignes et des colonnes

Les lignes et les colonnes sont des composants de mise en page couramment utilisés, mais leur utilisation flexible peut entraîner différents effets de mise en page. Par exemple, utilisez mainAxisAlignment et crossAxisAlignment pour contrôler l'alignement des sous-composants sur les axes principal et transversal.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

2. Disposition flexible Flex et étendue

Flex et Expanded peuvent être utilisés pour mettre en œuvre des dispositions flexibles, permettant aux composants d'occuper une proportion de l'espace disponible. Par exemple, le code ci-dessous remplit un conteneur bleu de deux fois la largeur.

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Expanded(
      flex: 2,
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)

Partie II : Implémentation d'animations et d'effets dynamiques

1. Utiliser un conteneur animé

AnimatedContainer peut générer automatiquement des effets d'animation de transition lorsque les propriétés changent. Par exemple, le code suivant modifie la largeur et la couleur d'un conteneur lors d'un clic.

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _width = 100;
  Color _color = Colors.blue;

  void _animateContainer() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _animateContainer,
      child: AnimatedContainer(
        width: _width,
        height: 100,
        color: _color,
        duration: Duration(seconds: 1),
        curve: Curves.easeInOut,
      ),
    );
  }
}

2. Utiliser l'animation de héros

Les animations de héros peuvent produire des transitions fluides lors du changement de page. Utiliser la même balise sur différentes pages peut rendre plus naturelle la transition entre les éléments partagés entre deux pages.

class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => PageB(),
        ));
      },
      child: Hero(
        tag: 'avatar',
        child: CircleAvatar(
          radius: 50,
          backgroundImage: AssetImage('assets/avatar.jpg'),
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'avatar',
          child: CircleAvatar(
            radius: 150,
            backgroundImage: AssetImage('assets/avatar.jpg'),
          ),
        ),
      ),
    );
  }
}

Troisième partie : dessins et effets personnalisés

1. Utilisez CustomPaint pour dessiner des graphiques

CustomPaint vous permet de dessiner sur mesure divers graphiques et effets. Ce qui suit est un exemple simple qui dessine un rectangle avec une bordure.

class CustomPaintExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: RectanglePainter(),
      child: Container(),
    );
  }
}

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    canvas.drawRect(Rect.fromLTWH(50, 50, 200, 100), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Quatrième partie : Bibliothèques de matériaux et de composants de Cupertino

1. Utilisation des composants matériels

La bibliothèque de composants Material fournit une série de composants d’interface utilisateur conformes à la spécification Material Design. Par exemple, AppBar, Button, Card, etc. Ce qui suit est un exemple utilisant Card.

Card(
  elevation: 4,
  child: ListTile(
    leading: Icon(Icons.account_circle),
    title: Text('John Doe'),
    subtitle: Text('Software Engineer'),
    trailing: Icon(Icons.more_vert),
  ),
)

2. Utilisation des composants de Cupertino

La bibliothèque de composants de Cupertino fournit des composants d'interface utilisateur de style iOS, adaptés au développement d'applications Flutter sur la plateforme iOS. Par exemple, CupertinoNavigationBar, CupertinoButton, etc.

dart
Copier le code
CupertinoNavigationBar(
middle: Text('Cupertino Exemple'),
trailing: CupertinoButton(
child: Text('Done'),
onPressed: () {},
),
)

Partie V : Exemples complets

Ce qui suit est un exemple plus complet, couvrant les points de connaissances mentionnés précédemment en matière de mise en page, d'animation, de dessin personnalisé et de bibliothèque de composants Material/Cupertino.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced UI Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedRotateExample(),
            SizedBox(height: 20),
            CustomPaintExample(),
            SizedBox(height: 20),
            PlatformWidgetsExample(),
          ],
        ),
      ),
    );
  }
}

class AnimatedRotateExample extends StatefulWidget {
  @override
  _AnimatedRotateExampleState createState() => _AnimatedRotateExampleState();
}

class _AnimatedRotateExampleState extends State<AnimatedRotateExample> {
  double _rotation = 0;

  void _startRotation() {
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        _rotation = 45;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            _startRotation();
          },
          child: AnimatedBuilder(
            animation: Tween<double>(begin: 0, end: _rotation).animate(
              CurvedAnimation(
                parent: ModalRoute.of(context)!.animation!,
                curve: Curves.easeInOut,
              ),
            ),
            builder: (context, child) {
              return Transform.rotate(
                angle: _rotation * 3.1416 / 180,
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Icon(
                Icons.star,
                color: Colors.white,
              ),
            ),
          ),
        ),
        Text('Tap to rotate'),
      ],
    );
  }
}

class CustomPaintExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CirclePainter(),
      child: Container(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        child: Text(
          'Custom Paint',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2;
    final paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

class PlatformWidgetsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Material(
          elevation: 4,
          child: ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('John Doe'),
            subtitle: Text('Software Engineer'),
            trailing: Icon(Icons.more_vert),
          ),
        ),
        SizedBox(height: 20),
        CupertinoButton.filled(
          child: Text('Explore'),
          onPressed: () {},
        ),
      ],
    );
  }
}

Cet exemple présente une interface complète, comprenant des animations par clic pour faire pivoter, un dessin personnalisé et des composants Material/Cupertino. Vous pouvez développer et modifier davantage sur cette base pour répondre à des exigences de conception d'interface utilisateur plus complexes.

Résumer

Dans cet article, nous avons approfondi les techniques avancées de Flutter UI. Nous avons découvert les principes de mise en page, la mise en œuvre de l'animation, les dessins et effets personnalisés, ainsi que l'utilisation des bibliothèques de composants Material et Cupertino. En travaillant sur des exemples, vous serez en mesure de créer des interfaces utilisateur complexes et impressionnantes avec une plus grande confiance.

J'espère que cet article pourra vous aider à progresser davantage dans l'avancement de l'interface utilisateur Flutter. Si vous avez des questions ou avez besoin de conseils supplémentaires, n'hésitez pas à me les poser. Bonne chance dans votre parcours de développement Flutter !