How To Use Fitted Box Widget Using Flutter Android App

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

Flutter is all about widgets. There are many widgets that are used for positioning and styling of text. In this article, we’ll learn about the FittedBox widget. FittedBox is a very useful widget that scales and positions its child within itself according to fit and alignment. Consider an app, in which, you have to take input from the user and in a certain scenario, the user enters a large input that overflows and scatters other widgets. As many of the widgets are dynamic, which means they can grow and shrink in size, according to their child widget’s size. So, in this case, the user interface wouldn’t be adaptive. In order to overcome this problem, we can use the FittedBox widget

How To Use Fitted Box Widget Using Flutter Android App

FittedBox Widget
Complete Code For Fitted Box 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.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.pink,
          title: Text("FittedBox Widget"
          )),
      body: Center(
        child: FittedBox(
          fit: BoxFit.contain,
          child: Container(
            height: 200.0,
            width: 150.0,
            color: Colors.pink,
          ),
        ),
      ),
    );
  }
}

Related Post