Skip to content

[Flutter] Add or Delete The Components in Row or Column

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: A List<Container> data type variable which store Container components.
  • addContainer(): Add a random color Container to containerList.
  • 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:

https://clay-atlas.com/wp-content/uploads/2021/03/Screen-Recording-2021-03-09-at-1.20.29-PM.mov

References

Read More

Tags:

Leave a ReplyCancel reply

Exit mobile version