openplanning

Hướng dẫn sử dụng Flutter Center

Xem thêm các chuyên mục:

1- Flutter Center

Center là một widget đặt widget con duy nhất của nó tại trung tâm của nó.
CenterAlign khá giống nhau, chúng chỉ có duy nhất một widget con, nhưng Align cho phép bạn tùy biến vị trí của widget con bên trong nó.
  • TODO Link!
Center Constructor
const Center(
    {Key key,
    double widthFactor,
    double heightFactor,
    Widget child}
)
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 là widget con duy nhất của Center. Trong một số tình huống sử dụng nó có thể là đối tượng Row, Column hoặc Stack để có thể chứa được nhiều widget khác.
  • TODO Link!
Widget child
Ví dụ với child là một đối tượng Row, nó có thể chứa nhiều widget con trên một hàng.
child (ex1)
Center (
    child: Row (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)
Ví dụ với child là một đối tượng Column, nó có thể chứa nhiều widget con trên một cột.
child (ex2)
Center (
    child: Column (
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Icon (
             Icons.place,
             size: 48,
             color: Colors.redAccent
         ),
         Text("My Location!")
       ],
    )
)

3- widthFactor

widthFactor là một hệ số có giá trị trong khoảng (0,1), được sử dụng để tính toán chiều rộng của Center dựa trên chiều rộng của child (Con của nó). Nếu widthFactor không null chiều rộng của Center bằng chiều rộng của child nhân với hệ số này.
double widthFactor

4- heightFactor

heightFactor là một hệ số có giá trị trong khoảng (0,1), được sử dụng để tính toán chiều cao của Center dựa trên chiều cao của child (Con của nó). Nếu heightFactor không null chiều cao của Center bằng chiều cao của child nhân với hệ số này.
double heightFactor

Xem thêm các chuyên mục: