Le Tutoriel de Flutter RotatedBox

RotatedBox
quarterTurns
child

1. RotatedBox

RotatedBox est un widget qui fait pivoter son enfant d'un nombre entier de quarts de tour. Chaque quart correspond à un angle de 90 degrés ou -90 degrés.

RotatedBox Constructor:

RotatedBox Constructor

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

Vous trouverez ci-dessous un exemple d'utilisation de RotatedBox pour faire pivoter un objet Texte de 90 degrés dans le sens des aiguilles d'une montre (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)
                )
            )
        )
    );
  }
}

Voici un autre exemple, faire pivoter l'objet Text de 90 degrés dans le sens antihoraire (quarterTurns = -1).

(ex2)

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

LinearProgressIndicator est une barre de progression horizontale dont vous pouvez utiliser le RotatedBox pour faire pivoter 90 degrés afin d'obtenir une barre de progression verticale.

(ex3)

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

Le Tutoriel de Flutter Transform

2. quarterTurns

quarterTurns est le nombre de fois où le widget enfant doit être tourné de 90 degrés dans le sens des aiguilles d'une montre. La valeur de quarterTurns peut être un entier négatif.

@required int quarterTurns

3. child

Widget child

Le Tutoriel de Flutter RotatedBox

1. RotatedBox

2. quarterTurns

3. child

Tutoriels de programmation Flutter

Tutoriels de programmation Flutter

Articles les plus récents