Calculation based on index (e.g. 50*index to change width of containers) AND dynamic navigation from-CodePudding

Here is my code below. I have tried using _navigation.indexOf and .indexWhere but both want to return integers and won't let me convert them into num dataTypes. I am hoping to generate at least 5 containers that decrease in size (e.g. 450 - 50*index) that can function as navigation buttons. If this cant work with a listview.builder, would a for loop be an option instead?

import 'package:flutter/material.dart';

class Navigation {
  final String title;

  Navigation(this.title);
}

class HomeScreen extends StatelessWidget {
  static const String id = '/';

  List<Navigation> _navigation = [
    Navigation('Title1'),
    Navigation('Title2'),
    Navigation('Title3'),
    Navigation('Title4'),
    Navigation('Title5'),
  ];

  int findIndex(List<Navigation> _navigation, String buttonName) {
    final getIndex =
        _navigation.indexWhere((element) => element.title == buttonName);
    return getIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: null,
        body: ListView.builder(
            itemCount: _navigation.length,
            itemBuilder: (BuildContext nav, int index) {
              return TextButton(
                  onPressed: () {
                    Navigator.pushNamed(context, _navigation[index].title);
                  },
                  child: Container(
                      height: 50,
                      width: 450,
                      child: Text(
                        '${_navigation[index].title}',
                        textAlign: TextAlign.end,
                      )));
            }));
  }
}

CodePudding user response：

i can think of two method.

First Use margin in Container widget like this.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: ListView.builder(
        itemCount: _navigation.length,
        itemBuilder: (BuildContext nav, index) {
          return Container(
            margin: EdgeInsets.only(
              left: (20.0 * index),
            ),
            alignment: AlignmentDirectional.centerStart,
            child: TextButton(
              onPressed: () {
                Navigator.pushNamed(context, _navigation[index].title);
              },
              child: Text(
                _navigation[index].title,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }

Second use Padding widget like this.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: ListView.builder(
        itemCount: _navigation.length,
        itemBuilder: (BuildContext nav, index) {
          return Padding(
            padding: EdgeInsets.only(
              left: (50.0 * index),
            ),
            child: TextButton(
              onPressed: () {
                Navigator.pushNamed(context, _navigation[index].title);
              },
              child: Text(
                _navigation[index].title,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
      ),
    );
  }