Last Updated on 2021-10-14 by Clay
The Row and Column in Flutter can make our components display a horizontal or vertical layout, which are very important layout forms.
Sometimes, we need to dynamically add or delete components in the layout as the user operates. And what I want to record today is to do this in Row and Container.
The core concept is to use a function to return data type variables such as List<Widget>
(that is, other widgets can also be implemented in this way) to the children parameter.
Next, we only need to adjust the objects in List<Widget>
and refresh the interface to make the effect of dynamically adjusting the objects.
Program explanation
Next, I will introduce the sample code step by step. The complete code is placed in the next section.
Entry point
import 'dart:math';
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
// HomePage
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
First, import the necessary library and establish the main()
entry point.
A function that returns a random color Container component
// Randomly colored Container
Container createNewContainer() {
return Container(
height: 100,
width: 100,
color: Color.fromARGB(
255,
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
),
);
}
In order to make the difference between the added Container element, I will give a random color every time I create a new one.
_HomePageState
Here I declare the following variables and functions:
containerList
: AList<Container>
data type variable which store Container components.addContainer()
: Add a random color Container tocontainerList
.popContainer()
: Pop the last Container from containerList._childrenList()
: Return the containerList variable
Then I set up two buttons at the bottom, one corresponding to addContainer()
and one corresponding to popContainer()
.
// _HomePageState
class _HomePageState extends State<HomePage> {
// Init
List<Container> containerList = [
createNewContainer(),
createNewContainer(),
];
// Add
void addContainer() {
containerList.add(createNewContainer());
}
// Pop
void popContainer() {
containerList.removeLast();
}
// _childrenList
List<Widget> _childrenList() {
return containerList;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _childrenList(),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
backgroundColor: Colors.black,
onPressed: () {
setState(() {
addContainer();
});
},
child: Icon(Icons.add),
),
SizedBox(
height: 10,
),
FloatingActionButton(
backgroundColor: Colors.grey,
onPressed: () {
setState(() {
popContainer();
});
},
child: Icon(Icons.remove),
)
],
)
);
}
}
The detail output can refer the next section.
Complete Code
import 'dart:math';
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
// HomePage
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
// Randomly colored Container
Container createNewContainer() {
return Container(
height: 100,
width: 100,
color: Color.fromARGB(
255,
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
),
);
}
// _HomePageState
class _HomePageState extends State<HomePage> {
// Init
List<Container> containerList = [
createNewContainer(),
createNewContainer(),
];
// Add
void addContainer() {
containerList.add(createNewContainer());
}
// Pop
void popContainer() {
containerList.removeLast();
}
// _childrenList
List<Widget> _childrenList() {
return containerList;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: _childrenList(),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
backgroundColor: Colors.black,
onPressed: () {
setState(() {
addContainer();
});
},
child: Icon(Icons.add),
),
SizedBox(
height: 10,
),
FloatingActionButton(
backgroundColor: Colors.grey,
onPressed: () {
setState(() {
popContainer();
});
},
child: Icon(Icons.remove),
)
],
)
);
}
}
Output:
References
- https://stackoverflow.com/questions/51605131/how-to-add-the-widgets-dynamically-to-column-in-flutter/51610046
- https://stackoverflow.com/questions/56335114/dynamically-add-widgets-to-a-columns-children-in-flutter