Is using widget.[variable_name] the best way to reference StatefulWidget variables?

Question

I have a variable friendsList that is passed to the FriendsFeed class. I reference the friendsList in the FriendsFeed State with widget.friendsList. Is using widget.[my_variable_name] to reference StatefulWidget variables the professional way to do so? I can't help but feel like there's a cleaner way to do so.

import 'package:flutter/material.dart';

class FriendsFeed extends StatefulWidget {
  FriendsFeed(this.friendsList);

  final List<dynamic> friendsList;

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

class _FriendsFeedState extends State<FriendsFeed> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      children: <Widget>[
        for (int index = 0; index < widget.friendsList.length; index++)
          ListTile(
            key: Key('$index'),
            tileColor:
                widget.friendsList[index].isOdd ? oddItemColor : evenItemColor,
            title: Text('Item ${widget.friendsList[index]}'),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = widget.friendsList.removeAt(oldIndex);
          widget.friendsList.insert(newIndex, item);
        });
      },
    );
  }
}

score 0 · Accepted Answer · edited Jun 13 '21 at 19:05

Yeah, it is. But there are still ways you can make it cleaner.

One way is creating a final variable inside the build method or as a final field in your app, say "friendList" and you assign it a the value "widget.friendsList". You can now continue to use the var "friendList" anywhere in the build function or in your app (depending on where you declared it).

So, since from your code it seems you want to be able re-order/re-arrange the items in the list which means being able to modify the list, I will suggest you create a field in your state class like so:

    class FriendsFeed extends StatefulWidget {
      FriendsFeed(this.friendsList);

      final List<dynamic> friendsList;

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

    class _FriendsFeedState extends State<FriendsFeed> {
      // declare it here if you wish to make any modification to the list 
      // outside the build function.
      late List<dynamic> _friendsList;

      @override
      void initState() {
      _friendsList = widget.friendsList;

      super.initState();
    }

      @override
      Widget build(BuildContext context) {
      final ColorScheme colorScheme = Theme.of(context).colorScheme;
      final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
      final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

      return ReorderableListView(
       padding: const EdgeInsets.symmetric(horizontal: 40),
        children: <Widget>[
         for (int index = 0; index < _friendsList.length; index++)
          ListTile(
            key: Key('$index'),
            tileColor: _friendsList[index].isOdd ? oddItemColor : evenItemColor,
            title: Text('Item ${_friendsList[index]}'),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _friendsList.removeAt(oldIndex);
          _friendsList.insert(newIndex, item);
        });
      },
    );
  }
}

Is using widget.[variable_name] the best way to reference StatefulWidget variables?

1 Answers1