How to Rotate Widget in flutter?

Last updated Sep 14, 2021


In this flutter example we cover how to rotate flutter widget. Sometimes while design ui using widgets we may require to display widget with some angle, but how we can display widget with angle. To display widget with some angle we will use the Flutter RotatedBox Widget.

We can  also rotate widget by using RotationTransition widget, while using this widget it will make animate for rotation of the widget. 

 

Let's check a simple code snippet for RotationTransition

RotationTransition(
  turns: new AlwaysStoppedAnimation(10 / 360),
  child: new Text("Rotate Widget"),
)

 

Flutter Rotate widget with RotatedBox

Rotate widget by specific  angle we will use RotatedBox widget

RotatedBox(quarterTurns:turns,
  child: AspectRatio(
    aspectRatio: _controller.value.aspectRatio,
    child:  Stack(
      alignment: Alignment.bottomCenter,
      children: [

        VideoPlayer(_controller),
        _ControlsOverlay(controller: _controller,onClickCallback:(){
          setState(() {
            if( turns==0)
              turns=1;
            else turns=0;
          });
        }),
        VideoProgressIndicator(_controller, allowScrubbing: true),

      ],

    ),),
)

 

Here we are  loading the RotatedBox widget with adding video player widget. When user want to view the video we will rotate the widget by 180 degrees, this will applied by change the quarterTurns:turns value.

 

 

Download Source code

 

Complete code for Flutter RotatedBox widget example

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_tutorialspoint/presentation/journey/player/mixins.dart';

import 'package:video_player/video_player.dart';
class PlayerScreen extends StatefulWidget {

  final String url;


  PlayerScreen({required this.url});
  @override
  _PlayerScreenScreenState createState() => _PlayerScreenScreenState();
}

class _PlayerScreenScreenState extends State {
  late VideoPlayerController _controller;
  bool isLandscape=false;
  int turns=0;

  @override
  void initState() {
    _controller = VideoPlayerController.network(widget.url);
    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize().then((_) => setState(() {}));
    _controller.play();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Column(
        children: [
          (turns==0)?AppBar(title: Text("Player"),):SizedBox.shrink(),
          SingleChildScrollView(
            child:(_controller.value.isInitialized) ? RotatedBox(quarterTurns:turns,
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child:  Stack(
                  alignment: Alignment.bottomCenter,
                  children: [

                    VideoPlayer(_controller),
                    _ControlsOverlay(controller: _controller,onClickCallback:(){
                      setState(() {
                        if( turns==0)
                          turns=1;
                        else turns=0;
                      });
                    }),
                    VideoProgressIndicator(_controller, allowScrubbing: true),

                  ],

                ),),
            ):
            Container(height:300,child: Center(child: CircularProgressIndicator(),)),



          ),
        ],
      ),

    );
  }

}
/// blocks rotation; sets orientation to: portrait
void _LandscapeModeOnly() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
}

void _enableRotation() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}
typedef ColorCallback = void Function();
class _ControlsOverlay extends StatelessWidget {
  final ColorCallback onClickCallback;
  const _ControlsOverlay({Key? key, required this.controller,required this.onClickCallback})
      : super(key: key);

  static const _examplePlaybackRates = [
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  final VideoPlayerController controller;

  @override
  Widget build(BuildContext context) {
    return  Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          color: Colors.black26,
          height: 50,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: AnimatedSwitcher(
              duration: Duration(milliseconds: 50),
              reverseDuration: Duration(milliseconds: 200),
              child: Row(

                children: [
                  MaterialButton(
                    minWidth: 20,
                    onPressed: () async{
                      var position=   await controller.position;

                      controller.seekTo(Duration(seconds: position!.inSeconds-5));
                    },
                    child: Icon(
                      Icons.arrow_back_ios,
                      color: Colors.white,
                      size: 20.0,
                    ),
                  ),
                  SizedBox(width: 10,),
                  controller.value.isPlaying
                      ? MaterialButton(
                    minWidth: 20,
                    child: Icon(
                      Icons.pause,
                      color: Colors.white,
                      size: 30.0,
                    ),
                    onPressed: () {
                      controller.value.isPlaying ? controller.pause() : controller.play();
                    },
                  )
                      : MaterialButton(
                    minWidth: 20,
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 30.0,
                    ),
                    onPressed: () {
                      controller.value.isPlaying ? controller.pause() : controller.play();
                    },
                  ),
                  SizedBox(width: 10,),
                  MaterialButton(
                    minWidth: 20,
                    onPressed: () async{
                      var position=   await controller.position;

                      controller.seekTo(Duration(seconds: position!.inSeconds+5));
                    },
                    child: Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                      size: 20.0,
                    ),
                  ), SizedBox(width: 10,),
                  MaterialButton(
                    minWidth: 20,
                    onPressed: () async{
                      onClickCallback();
                    },
                    child: Icon(
                      Icons.fullscreen_exit,
                      color: Colors.white,
                      size: 20.0,
                    ),
                  ),
                  SizedBox(width: 10,),
                  PopupMenuButton(
                    initialValue: controller.value.playbackSpeed,
                    tooltip: 'Playback speed',
                    color: Colors.white,
                    onSelected: (speed) {
                      controller.setPlaybackSpeed(speed);
                    },
                    itemBuilder: (context) {
                      return [
                        for (final speed in _examplePlaybackRates)
                          PopupMenuItem(
                            value: speed,
                            child: Text('${speed}x',),
                          )
                      ];
                    },
                    child: Text('${controller.value.playbackSpeed}x',style: TextStyle(color: Colors.white),),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );

  }
}

 

Conclusion: In this flutter example tutorial we covered how to show Widget inside RotatedBox and Rotate widget by making the quarterTurns:turns

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

35 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions