codestory

Die Anleitung zu Flutter Center

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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.
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
Zum Beispiel:
heightFactor (ex1)

Center(
    child: ElevatedButton (
        child: Text("Button"),
        onPressed: () {}
    ),
    heightFactor: 3.0
)

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.