CODEWITHSUNDEEP
flutterdart
Hassan Zia
Hassan Zia

Reputation: 177

List.add() doesn't work when called by a method from another class

I'm new to flutter/dart and trying to create a learning project. I needed a list which I first added in main.dart but then separated it with another class. I've 3 files now

  1. main.dart
  2. icon.dart
  3. mid.dart

main.dart:

import 'package:flutter/material.dart';
import 'package:test_project/icon.dart';
import 'mid.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: Testing(),
          ),
        ),
      ),
    );
  }
}

class Testing extends StatefulWidget {
  @override
  _TestingState createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  MyIcons myIcons = MyIcons();
  Mid mid = Mid();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: myIcons.icon1,
                ),
                Row(
                  children: myIcons.icon2,
                ),
              ],
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: FlatButton(
                  color: Colors.teal,
                  child: Text(
                    'Add Check Icon',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      myIcons.icon1.add(Icon(
                        Icons.check,
                        color: Colors.green,
                      ));
                    });
                  },
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: FlatButton(
                  color: Colors.red,
                  child: Text(
                    'Add Cross Icon',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      mid.addIcon();
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

icon.dart:

import 'package:flutter/material.dart';

class MyIcons {
  List<Icon> icon1 = [];
  List<Icon> icon2 = [];
}

and mid.dart:

import 'package:flutter/material.dart';
import 'icon.dart';
//import 'main.dart';

class Mid {
  MyIcons myIcons = MyIcons();

  void addIcon() {
    myIcons.icon2.add(Icon(
      Icons.close,
      color: Colors.red,
    ));
  }
}

I can add check icons successfully when by pressing the first button which directly calls the object of icon.dart file and adds the icons into list But can't add cross icons when I call the method addIcon() from mid.dart.

here is the layout of the app:

App Layout

Upvotes: 1

Views: 424

Answers (1)

Zayne ZH
Zayne ZH

Reputation: 406

Your Mid class has it's own myIcons, which is a separate instance than the one in _TestingState.

To use only one set of myIcons, you don't need to instantiate another one in _TestingState, because the Mid() instantiation already instantiates its own MyIcon. (if that makes sense)

Here's how I would change the _TestingState class in main.dart, no need to change anything else.

// ... Main.dart file 

class _TestingState extends State<Testing> {
  Mid mid = Mid();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: mid.myIcons.icon1,
                ),
                Row(
                  children: mid.myIcons.icon2,
                ),
              ],
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: FlatButton(
                  color: Colors.teal,
                  child: Text(
                    'Add Check Icon',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      mid.myIcons.icon1.add(Icon(
                        Icons.check,
                        color: Colors.green,
                      ));
                    });
                  },
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: FlatButton(
                  color: Colors.red,
                  child: Text(
                    'Add Cross Icon',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      mid.addIcon();
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Notice how I removed the myIcons instantiation in _TestingState, and accessed the myIcons in mid instead. so mid.addIcon() adds to icon2, whereas mid.myIcons.icon1.add() will add to icon1.

Upvotes: 1

Related Questions