devstory

Le Tutoriel de Flutter Center

View more Tutorials:

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.
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
Par exemple:
heightFactor (ex1)
Center(
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    ),
    heightFactor: 3.0
)

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.