Aspect Ratio

import "package:flutter/material.dart";

/// EXAMPLE 1
// void main()
// {
//   runApp(MyApp());
// }
// class MyApp extends StatelessWidget
// {
//   MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: "AspectRatio",
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         primarySwatch: Colors.grey,
//       ),
//       home: AspectDemo(),
//     );
//   }
// }
// class AspectDemo extends StatelessWidget
// {
//   AspectDemo({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text("AspectRatio"),
//         centerTitle: true,
//         backgroundColor: Colors.grey,
//       ),
//       body: Center(
//         child: Container(
//           color: Colors.blue,
//           width: 200.0,
//           height: 200.0,
//           alignment: Alignment.center,
//           child: AspectRatio(
//             aspectRatio: 0.5,
//             child: Container(
//               width: 100.0,
//               height: 50.0,
//               // color: Colors.green,
//               child: Image.asset("assets/images/Lord-Hanuman.jpg"),
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }

///body: Center(
///   child: AspectRatio(
///   aspectRatio: 16/9,
///   child: Container(
///     height: 200.0,
///     width: 100.0,
///     color: Colors.amber,
///   ),
///   ),
///),
/// Explanation: Here above aspectRatio is 16/9 that means screen will divide in 16 parts in Width
/// and 9 parts (of that 16 parts) will assign them as Height
///

/// EXAMPLE 2 : AspectRatio
/// import "package:flutter/material.dart";
//
// void main()
// {
//   runApp(MyApp());
// }
// class MyApp extends StatelessWidget
// {
//   MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: "AspectRatio",
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         primarySwatch: Colors.grey,
//       ),
//       home: AspectDemo2(),
//     );
//   }
// }
// class AspectDemo2 extends StatelessWidget
// {
//   AspectDemo2({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text("AspectRatio"),
//         centerTitle: true,
//         backgroundColor: Colors.grey,
//       ),
//       body: Center(
//         child: Container(
//           color: Colors.blue,
//           alignment: Alignment.center,
//           width: double.infinity,
//           height: 200.0,
//           child: AspectRatio(
//             aspectRatio: 16/9,
//             child: Container(
//               // color: Colors.green,
//               child: Image.asset("assets/images/Lord-Hanuman.jpg"),
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }

/// EXAMPLE 3
void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget
{
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "AspectRatio",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: AspectDemo3(),
    );
  }
}
class AspectDemo3 extends StatelessWidget
{
  AspectDemo3({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("AspectRatio", style: TextStyle(fontWeight: FontWeight.bold),),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: double.infinity,
                height: 100.0,
                child: AspectRatio(
                  aspectRatio: 16/9,
                  child: Container(
                    child: Image.asset("assets/images/Lord-Hanuman.jpg"),
                  ),
                ),
              ),
              const SizedBox(height: 20.0),
              Container(
                color: Colors.blue,
                width: double.infinity,
                height: 200.0,
                child: AspectRatio(
                  aspectRatio: 8/3,
                  child: Image.asset("assets/images/Lord-Hanuman.jpg"),
                ),
              ),
              const SizedBox(height: 20.0),
              Container(
                color: Colors.blue,
                width: double.infinity,
                height: 300.0,
                child: AspectRatio(
                  aspectRatio: 1/1,
                  child: Image.asset("assets/images/Lord-Hanuman.jpg"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}