codestory

Die Anleitung zu Flutter Spacer

  1. Flutter Spacer
  2. flex

1. Flutter Spacer

Spacer erstellt einen leeren, anpassbaren Bereich, mit dem der Abstand zwischen untergeordneten Widget in einem Flex container wie Column, Row, ..
Spacer Constructor
const Spacer(
    {Key key,
    int flex: 1}
)
Zum Beispiel:
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

Das Property flex wird als Gewicht vom Spacer betrachtet. Es bestimmt, wie viel Platz dem Spacer zugewiesen wird. Der zugewiesene Platz ist proportional zum Wert flex. Der Standardwert für flex ist 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),
  ],
)

Anleitungen Flutter

Show More