MOCKSTACKS
EN
Questions And Answers

More Tutorials









Flutter Single Child Layout Widgets


Layout Widgets are used that affect the positioning and presentation of their child widgets.

Earlier we mentioned that there are two main kinds of Layout Widgets:
Single-Child Layout Widgets and Multi-Child Layout Widgets.

We covered Multi-Child Layout Widgets in the previous chapter.

The purpose of this chapter is to cover Single-Child Layout Widgets.
These are Widgets that affect the layout of only one child Widget.
They are used to wrap a single child Widget and affect its presentation.

The Padding Widget is probably used most of all these and is used to affect the padding around its child widget.

Padding


Used all the time to add padding around a child Widget. It uses EdgeInset objects to specify the padding metrics around the child Widget.

Example – ‘padding’


This app allows the user click on an icon on the toolbar to cycle through the border insets.

Source Code


import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new HomeWidget(),
);
}
}
class HomeWidget extends StatefulWidget {
HomeWidget({Key key}) : super(key: key);
@override
_HomeWidgetState createState() => new _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
static const double TWENTY = 20.0;
static const List<String> _titles = [
"all 20.0",
"left 20.0",
"right 20.0",
"top 20.0",
"bottom 20.0",
"sym horiz 20.0",
"sym vert 20.0"
];
static const List<EdgeInsets> _edgeInsets = [
const EdgeInsets.all(TWENTY),
const EdgeInsets.only(left: TWENTY),
const EdgeInsets.only(right: TWENTY),
const EdgeInsets.only(top: TWENTY),
const EdgeInsets.only(bottom: TWENTY),
const EdgeInsets.symmetric(horizontal: TWENTY),
const EdgeInsets.symmetric(vertical: TWENTY)
];
int _index = 0;
final Container _childContainer = Container(color: Colors.blue);
void _next() {
setState(() {
_index++;
if (_index >= _titles.length) {
_index = 0;
}
});
}
@override
Widget build(BuildContext context) {
Padding padding =
Padding(padding: _edgeInsets[_index], child: _childContainer);
return Scaffold(
appBar: AppBar(
title: Text(_titles[_index]),
actions: [
new IconButton(
icon: new Icon(Icons.refresh), onPressed: () => _next())
],
),
body: Center(
child: Container(
child: padding,
decoration: BoxDecoration(
border: new Border.all(color: Colors.blueAccent)))));
}
}



Conclusion

In this page (written and validated by ) you learned about Flutter Single Child Layout Widgets . What's Next? If you are interested in completing Flutter tutorial, your next topic will be learning about: Flutter App Scaffolding Widgets.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.