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.
  • TODO Link!
Center Constructor
const Center(
    {Key key,
    double widthFactor,
    double heightFactor,
    Widget child}
)
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.
  • TODO Link!
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 avec une valeur dans la plage (0,1), 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 chile multipliée par ce facteur.
double widthFactor

4- heightFactor

heightFactor est un facteur avec une valeur dans la plage (0,1), 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.
double heightFactor

View more Tutorials: