Flutter/ Focus on specific widget in ListView

Question

I am developing a mobile App with flutter.

I have a question about the listview.

As you can see, in ManageAnnouncementMainScreen widget is getting one prop that is selectedNumber.

What I wanna do is, when I navigate to this widget, automatically focus on the widget that is matched with selectedNumber.

Which is the Initial Screen. For example, if I pass the 8 as a parameter to this screen, I want to make the initial screen display the widget with the number 8 in the center. Just something like this. Sorry for my poor English, I hope you got the point about this question.

I am just wondering if which is technically possible, if it`s possible, plz let me know that solution or any links that I can study.

Thanks for reading.

I am waiting for your help.

class ManageAnnouncementMainScreen extends StatefulWidget {
  ManageAnnouncementMainScreen({Key key, @required this.selectedNumber})
      : super(key: key);
  final int selectedNumber;

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

class _ManageAnnouncementMainScreenState
    extends State<ManageAnnouncementMainScreen> {
//Variable ——————————————————————————————————
  Authentication authentication;
  List<TestingBox> boxes = [
    TestingBox(
      colorCode: 1,
    ),
    TestingBox(
      colorCode: 2,
    ),
    TestingBox(
      colorCode: 3,
    ),
    TestingBox(
      colorCode: 4,
    ),
    TestingBox(
      colorCode: 5,
    ),
    TestingBox(
      colorCode: 6,
    ),
    TestingBox(
      colorCode: 7,
    ),
    TestingBox(
      colorCode: 8,
    ),
    TestingBox(
      colorCode: 9,
    ),
    TestingBox(
      colorCode: 10,
    ),
    TestingBox(
      colorCode: 11,
    ),
    TestingBox(
      colorCode: 12,
    ),
  ];

  //—————————————————————————————————— Variable

//Functions——————————————————————————————————
  buildBody() {
    return Container(
      child: ListView(children: boxes),
    );
  }

//——————————————————————————————————Functions

  @override
  Widget build(BuildContext context) {
    authentication = Provider.of<Authentication>(context, listen: true);
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: buildBody(),
    );
  }
}

class TestingBox extends StatefulWidget {
  const TestingBox({
    Key key,
    @required this.colorCode,
  }) : super(key: key);
  final int colorCode;

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

class _TestingBoxState extends State<TestingBox> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 150,
        color: getPositionColor(widget.colorCode),
        child: Center(
          child: Text(
            widget.colorCode.toString(),
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Answer 1

The best way is to use the scrollable_positioned_list package developed by Google team.

You can then define an ItemScrollController:

final ItemScrollController itemScrollController = ItemScrollController();

In the initState(), do this:

itemScrollController.jumpTo(index: widget.selectedNumber);

Use the itemScrollController in the listview:

return ScrollablePositionedList.builder(
  itemCount: boxes.length,
  itemBuilder: (context, index) => boxes[index],
  itemScrollController: itemScrollController,
);

If you still want to stick with the original ListView, then one way you can initiate the position of the ListView is to use ScrollController. Something like this:

ScrollController _scrollController = ScrollController();
var itemHeight = 150.0; // Example height of item

@override
initState() {
  _scrollController = ScrollController(
      initialScrollOffset: itemHeight * widget.selectedNumber);
  super.initState();
}