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

RotatedBox
quarterTurns
child

1. RotatedBox

RotatedBox là một widget xoay con của nó theo một số phần tư vòng tròn. Mỗi phần tư vòng tròn là một góc 90 độ hoặc -90 độ.

RotatedBox Constructor:

RotatedBox Constructor

const RotatedBox(
    {Key key,
    @required int quarterTurns,
    Widget child}
)

Dưới đây là một ví dụ sử dụng RotatedBox để xoay một đối tượng Text một góc 90 độ theo chiều kim đồng hồ (quarterTurns = 1).

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 RotatedBox Example"),
        ),
        body: Center (
            child: RotatedBox (
                quarterTurns: 1,
                child: Text(
                    "Flutter RotatedBox Tutorial",
                    style: TextStyle(fontSize: 25)
                )
            )
        )
    );
  }
}

Và ví dụ xoay đối tượng Text một góc 90 độ ngược chiều kim đồng hồ (quarterTurns = -1).

(ex2)

RotatedBox (
    quarterTurns: -1,
    child: Text(
        "Flutter RotatedBox Tutorial",
        style: TextStyle(fontSize: 25)
    )
)

LinearProgressIndicator là một thanh tiến trình nằm ngang, bạn có thể sử dụng RotatedBox để xoay nó một góc 90 để nhận được một thanh tiến trình thẳng đứng.

(ex3)

RotatedBox(
    quarterTurns: -1,
    child: SizedBox(
        width: 250,
        height: 25,
        child : LinearProgressIndicator(
          backgroundColor: Colors.cyan[100],
          valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
        )
    )
)

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

2. quarterTurns

quarterTurns là số lần xoay widget con một góc 90 độ theo chiều kim đồng hồ. Giá trị của quarterTurns có thể là một số nguyên âm.

@required int quarterTurns

3. child

Widget child

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

1. RotatedBox

2. quarterTurns

3. child

Các hướng dẫn lập trình Flutter

Các hướng dẫn lập trình Flutter

Các bài viết mới nhất