Responsive Flutter layout with FittedBox widget

In this shot, you will learn to use the FittedBox layout widget to create responsive layouts for Flutter applications.

Focus Widget: FittedBox

The FittedBox widget is a single child layout widget, which means it can have only one child assigned to it. In this example, the Row widget is added as a child to the FittedBox widget. The Row widget has two Image widgets as its children. Normally, the second child of the Row widget will overflow to the right when it renders its children on a screen size that is not sufficient to accommodate all of its children. However, with FittedBox this problem of widget overflowing is solved as it scales and positions its child within the parent widget.

Using `FittedBox` widget

FittedBox(
 child: Row(
   children: [
     Image.asset('assets/flutter_icon.png'),
     Image.asset('assets/flutter_icon.png'),
   ],
 ),
)

Source code repo

import 'package:flutter/material.dart';
/// FittedBox fits it child with in the given space during layout to avoid overflows.
void main() => runApp(FittedBoxDemo());
class FittedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFittedBox(),
    );
  }
}
class MyFittedBox extends StatefulWidget {
  @override
  _MyFittedBoxState createState() => _MyFittedBoxState();
}
int noFittedBox = 0;
int withFittedBox = 1;
Map<int, String> dropdown = {
  noFittedBox: "No FittedBox",
  withFittedBox: 'FittedBox',
};
class _MyFittedBoxState extends State<MyFittedBox> {
  @override
  void didUpdateWidget(MyFittedBox oldWidget) {
    super.didUpdateWidget(oldWidget);
  }
  int _currentOption = 0;
  String dropDownValue = dropdown[0];
  bool isFittedBox = false;
  @override
  void initState() {
    super.initState();
    updateContainer(0);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FittedBox Widget"),
        actions: [
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: DropdownButton(
              hint:
                  dropDownValue == null ? Text('Select') : Text(dropDownValue),
              items: dropdown.keys
                  .map((e) => DropdownMenuItem(
                        child: Text(dropdown[e]),
                        onTap: () {
                          setState(() {
                            _currentOption = e;
                            updateContainer(_currentOption == 0
                                ? noFittedBox
                                : withFittedBox);
                          });
                        },
                        value: e,
                      ))
                  .toList(),
              onChanged: (newValue) {
                print(newValue);
                dropDownValue = dropdown[newValue];
              },
            ),
          )
        ],
      ),
      //FittedBox Widget Usage
      body: isFittedBox
          ? FittedBox(
              child: rowOfImages(),
            )
          : rowOfImages(),
    );
  }
  Widget rowOfImages() {
    return Row(
      children: [
        Image.asset('assets/flutter_icon.png'),
        Image.asset('assets/flutter_icon.png'),
      ],
    );
  }
  void updateContainer(int option) {
    switch (option) {
      case 0:
        setState(() {
          isFittedBox = false;
        });
        break;
      case 1:
        setState(() {
          isFittedBox = true;
        });
        break;
    }
  }
}

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Attributions:

undefined by undefined

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Responsive Flutter layout with FittedBox widget

Using FittedBox widget

Source code repo

References

Using `FittedBox` widget