Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

community creator
flutter
dart
responsive layouts

Responsive Flutter layout with FittedBox widget

Priyanka Tyagi

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;
    }
  }
}

References

  1. FittedBox

  2. Flutter Cookbook2 project’s source code is available here

Happy cooking with Flutter :)

Follow me on Medium & twitter!

RELATED TAGS

community creator
flutter
dart
responsive layouts
RELATED COURSES

View all Courses

Keep Exploring