Le Tutoriel de Flutter Center

Flutter Center
child
widthFactor
heightFactor

1. Flutter Center

Center est un widget qui place le seul widget enfant en son centre.

Center et Align sont assez similaires. Ils n'ont qu'un seul widget enfant, mais Align vous permet de personnaliser la position du widget enfant à l'intérieur.

Le Tutoriel de Flutter Align

Center Constructor

const Center(
    {Key key,
    double widthFactor,
    double heightFactor,
    Widget child}
)

Si widthFactor n'est pas précisé, la largeur de Center sera à sa taille maximale, sinon la largeur de Center est égale à celle de child multipliée par widthFactor. Le paramètre heightFactor a également le même comportement pour la hauteur de Center. Donc, par défaut, la taille de Center sera aussi grande que possible.

Center(
    child: Icon (
        Icons.place,
        size: 128,
        color: Colors.redAccent
    )
)

main.dart (ex1)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter Center Example")
      ),
      body: Center(
          child: Icon (
              Icons.place,
              size: 128,
              color: Colors.redAccent
          )
      ),
    );
  }
}

2. child

child est le seul widget enfant de Center. Dans certains cas d'utilisation, il peut s'agir de l'objet Row, Column ou Stack afin de contenir éventuellement de nombreux autres widgets.

Widget child

Par exemple, si un child est l'objet Row, il peut contenir de nombreux widgets enfants sur une ligne.

child (ex1)

Center (
    child: Row (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)

Par exemple, si un child est l'objet Column, il peut contenir de nombreux widgets enfants sur une colonne.

child (ex2)

Center (
    child: Column (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)

3. widthFactor

widthFactor est un facteur, qui est utilisé pour calculer la largeur de Center en fonction de la largeur de child. Si widthFactor n'est pas nul, la largeur de Center est égale à la largeur de child multipliée par ce facteur.

Si widthFactor n'est pas précisé, la largeur de Center sera à sa taille maximale.

double widthFactor

Par exemple:

widthFactor (ex1)

Center(
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    ),
    widthFactor: 2.0
)

4. heightFactor

heightFactor est un facteur, qui est utilisé pour calculer la hauteur de Center en fonction de la hauteur de child. Si widthFactor n'est pas nul, la hauteur de Center est égale à la hauteur de child multipliée par ce facteur.

Si heightFactor n'est pas précisé, la hauteur de Center sera aussi grande que possible.

double heightFactor