devstory

Le Tutoriel de Flutter Spacer

  1. Flutter Spacer
  2. flex

1. Flutter Spacer

Spacer crée un espace vide et ajustable permettant d'ajuster les espaces entre les Widgets enfants dans un conteneur Flex (Flex container) tels que Column, Row, etc.
Spacer Constructor
const Spacer(
    {Key key,
    int flex: 1}
)
Par exemple:
Row (
  children: <Widget>[
    Text('Begin'),
    Spacer(), // Defaults to a flex of one.
    Text('Middle'),
    // Gives twice the space between Middle and End than Begin and Middle.
    Spacer(flex: 2),
    Text('End'),
  ],
)
main.dart (ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @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 Spacer Example")
        ),
        body: Center (
            child: Row(
              children: <Widget>[
                Text('Begin'),
                Spacer(), // Defaults to a flex of one.
                Text('Middle'),
                // Gives twice the space between Middle and End than Begin and Middle.
                Spacer(flex: 2),
                Text('End'),
              ],
            )
        )
    );
  }
}

2. flex

La propriété flex est considérée comme le poids de Spacer. Il détermine la quantité d'espace allouée à ce Spacer. L'espace alloué est proportionnel à la valeur flex. La valeur par défaut de flex est 1.
int flex: 1
flex (ex1)
Column (
  children: <Widget>[
    Icon(Icons.ac_unit, size: 32),
    Spacer(), // flex : 1 (Default)
    Icon(Icons.ac_unit, size: 36),
    Spacer(flex: 2),
    Icon(Icons.ac_unit, size: 48),
    Spacer(flex: 3),
    Icon(Icons.ac_unit, size: 24),
  ],
)

Tutoriels de programmation Flutter

Show More