Руководство Flutter Center

View more Tutorials:

Pуководства Flutter

Flutter Center
child
widthFactor
heightFactor

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- Flutter Center

Center - это виджет, который помещает свой единственный дочерний виджет в свой центр.

Center и Align довольно похожи. У них есть только один дочерний виджет, но Align позволяет изменять положение дочернего виджета внутри него.

Flutter Align

Center Constructor


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

Если параметр widthFactor не указан, то ширина Center будет самой большой, в противном случае ширина Center равна ширине child, умноженной на widthFactor. Параметр heightFactor также имеет такое же поведение для высоты Center. Поэтому по умолчанию размер Center будет максимальным.


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 - это единственный дочерний виджет Center. В некоторых случаях он может использоваться в качестве объекта Row, Column или Stack для содержания нескольких других виджетов.

Flutter Row

Flutter Column

Flutter Stack


Widget child

Например, если child является объектом Row, он может содержать несколько своих дочерних виджетов в строке.

child (ex1)


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

Например, если child является объектом Column, он может содержать несколько свох дочерних виджетов в столбце.

child (ex2)


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

3- widthFactor

widthFactor - это коэффициент, который используется для расчета ширины Center на основе ширины child (его дочернего элемента). Если widthFactor не null, то ширина Center равна ширине child, умноженной на этот коэффициент.

Если widthFactor не указан, то ширина Center будет как можно большой.


double widthFactor

Пример:

widthFactor (ex1)


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

4- heightFactor

heightFactor - это коэффициент, который используется для расчета высоты Center на основе высоты child (своего дочернего элемента). Если heightFactor не null, то высота Center равна высоте child, умноженной на этот коэффициент.

Если heightFactor не указан, то высота Center будет максимально возможной.


double heightFactor

Например:

heightFactor (ex1)


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

View more Tutorials:

Pуководства Flutter