openplanning

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

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

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- 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),
        )
    )
)
  • TODO Link?

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

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