How To Use Aspect Ratio Widget Using Flutter Android

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

A widget that attempts to size the child to a specific aspect ratio.The widget first tries the largest width permitted by the layout constraints. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.For example, a 16:9 width:height aspect ratio would have a value of 16.0/9.0. If the maximum width is infinite, the initial width is determined by applying the aspect ratio to the maximum height.Now consider a second example, this time with an aspect ratio of 2.0 and layout constraints that require the width to be between 0.0 and 100.0 and the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the biggest allowed) and a height of 50.0 (to match the aspect ratio).

How To Use Aspect Ratio Widget Using Flutter Android

Aspect Ratio Widget
Complete Code For Aspect Ratio Widget In Flutter
main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink[800],
          title: Text("Aspect Ratio Widget")),
      body: Center(
        child: AspectRatio(
          aspectRatio: 2.0,
          child: Container(
              height: 50.0,
              width: 50.0,
              color: Colors.red[800]
          ),
        ),
      ),
    );
  }
}

 

Related Post