How do add or remove a component from the layout in Flutter?

Question

How can add and remove any widget such as Container or Text from the Flutter app? like on the screen where you press any button and it adds or deletes components which consist of ViewItems and Edititems widgets.

Do it In Android, you call addChild() or removeChild() on a parent to dynamically add or remove child views. So is there some way like this in a Flutter?

How can we add & remove a widget from a layout in a flutter?

Solution

In Flutter, because widgets are immutable there is no direct equivalent to addChild(). Instead, you can pass a function to the parent that returns a widget, and control that child’s creation with a boolean flag.

For example, here is how you can toggle between two widgets when you click on a FloatingActionButton:

import 'package:flutter/material.dart';

void main() => runApp(SampleApp());

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return Container(
          width: 200,
          height: 40,
          color: Colors.amber,
          child: Center(child: Text('Tony Stark')));
    } else {
      return Container(
          width: 200,
          height: 40,
          color: Colors.grey.shade200,
          child: Center(
              child: TextField(
            autofocus: true,
            decoration: new InputDecoration(
                contentPadding:
                    EdgeInsets.only(left: 10, bottom: 11, top: 11, right: 15),
                hintText: "Edit name"),
          )));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

Comments

[Raine Dale Holgado]

Try this example on adding a widget: stackoverflow.com/a/64097893/12789200