Die Anleitung zu Flutter Center

Flutter Center
child
widthFactor
heightFactor

1. Flutter Center

Center ist ein Widget, das das einzige untergeordnete Widget in der Mitte platziert.

Center und Align sind ziemlich ähnlich. Sie haben nur ein untergeordnetes Widget, aber mit Align können Sie die Position des untergeordneten Widgets anpassen.

Die Anleitung zu Flutter Align

Center Constructor

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

Wenn widthFactor nicht angegeben ist, ist die Breite vom Center so groß wie möglich, andernfalls entspricht die Breite vom Center dass, die Breite vom child mit widthFactor multipliziert. Der Parameter heightFactor hat auch das gleiche Verhalten für die Höhe vom Center. Standardmäßig ist Center so groß wie möglich.

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 ist das einzige untergeordnete Widget von Center. In einigen Anwendungsfällen kann es sich um das Objekt Row, Column oder Stack handeln, um möglicherweise viele andere Widgets zu enthalten.

Widget child

Wenn child ein Objekt Row ist, kann es viele untergeordnete Widgets in einer Zeile enthalten.

child (ex1)

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

Wenn ein child beispielweise ein Objekt Column, kann es viele untergeordnete Widgets in einer Spalte enthalten.

child (ex2)

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

3. widthFactor

widthFactor ist ein Faktor, mit dem die Breite des Center basierend auf der Breite von child berechnet wird. Wenn widthFactor nicht null ist, entspricht die Breite von Centerd der Breite von child multipliziert mit diesem Faktor.

Wenn widthFactor nicht angegeben ist, ist die Breite vom Center so groß wie möglich.

double widthFactor

Zum Beispiel:

widthFactor (ex1)

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

4. heightFactor

heightFactor ist ein Faktor, mit dem die Höhe des Center basierend auf der Höhe von child. Wenn heightFactor nicht null ist, entspricht die Höhe von Center der Höhe von child multipliziert mit diesem Faktor.

Wenn heightFactor nicht angegeben ist, ist die Höhe vom Center so groß wie möglich.

double heightFactor