openplanning

Hướng dẫn và ví dụ Flutter Spacer

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

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Flutter Spacer

Spacer tạo ra một khoảng không gian trống, có thể điều chỉnh được, được sử dụng để điều chỉnh khoảng cách giữa các Widget con bên trong một bộ chứa Flex (Flex container) như Column, Row, ..
Spacer Constructor

const Spacer(
    {Key key,
    int flex: 1}
)
Ví dụ:

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

Property flex được coi là trọng lượng của Spacer, nó quyết định bao nhiêu không gian sẽ được phân bổ cho Spacer này. Không gian được phân bổ tỷ lệ thuận với giá trị của flex. Giá trị mặc định của flex là 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),
  ],
)

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