skip to Main Content

I’m a new flutter learner. I need to show a list of text in my app in any way.
Please let me know if there more way.

This is my List variable:

    List<Text> howtoreach = [
  const Text('How to become rich in 7 steps'),
  const Text(
      '1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...'),
  const Text('2, End your high-interest debt. ...'),
  const Text('3, Start budgeting and saving money. ...'),
  const Text('4, Pay yourself first. ...'),
  const Text('5, Start investing as soon as possible. ...'),
  const Text('6, Increase your income. ...'),
  const Text('7, Have the right mindset.'),
];

This is my text widget:

 Text(
                howtoreach,
                style:
                    const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                textAlign: TextAlign.justify,
              ),

This is the error I’m getting:

The argument type ‘List’ can’t be assigned to the parameter type ‘String’.

Here I’m including my complete code for reference only

    import 'package:flutter/material.dart';

List<Text> howtoreach = [
  const Text('How to become rich in 7 steps'),
  const Text(
      '1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...'),
  const Text('2, End your high-interest debt. ...'),
  const Text('3, Start budgeting and saving money. ...'),
  const Text('4, Pay yourself first. ...'),
  const Text('5, Start investing as soon as possible. ...'),
  const Text('6, Increase your income. ...'),
  const Text('7, Have the right mindset.'),
];

class DescriptionBlog extends StatelessWidget {
  const DescriptionBlog({
    super.key,
    required this.title,
    required this.image,
  });

  final String title;
  final String image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: AppBar(
          title: Text(title),
          backgroundColor: const Color.fromARGB(255, 43, 9, 75),
          toolbarOpacity: 0.99,
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              Image.asset(image),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                  color: Colors.green,
                ),
              ),
              ***Text(
                howtoreach,***
                style:
                    const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                textAlign: TextAlign.justify,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2

Answers


  1. Your howtoreach list is list of widget, so you can’t use its item inside Text widget, because Text widget only accept string as its data, you have three options.

    one: change your list to new list that contains a list of string like this:

    List<String> howtoreach = [
      'How to become rich in 7 steps',
      '1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...',
      '2, End your high-interest debt. ...',
      ...,
    ];
    

    two: remove your Text widget and return the list’s item like this:

    ListView.builder(
        shrinkWrap: true,
        itemBuilder: (context, index) {
            return howtoreach[index];
        },
        itemCount: howtoreach.length,
    )
    

    three: change your widget to this:

    ListView.builder(
        shrinkWrap: true,
        itemBuilder: (context, index) {
            return Text(
                    howtoreach[index].data,
                    style:
                        const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.justify,
                  );
        },
        itemCount: howtoreach.length,
    )
    

    you can do all three way their output is the same. You can replace number two and three with your Text widget inside Column.

    Login or Signup to reply.
  2. In order to populate data from a list of objects in this case List of Text Widgets, you need to use Listview() widget.

    ListView constructor creates all items all at once.

    Text(
                    title,
                    style: const TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                      color: Colors.green,
                    ),
                  ),
    ListView(
                        shrinkWrap: true,
                        children: howtoreach,
                      ),
    

    You can also try lazy loading items if you have very long list using ListView.builder() widget
    ListView.builder() constructor creates items as they’re scrolled onto the screen

    ListView.builder(
                        itemCount: howtoreach.length,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return howtoreach[index];
                        },
                      ),
    

    Setting shrinkWrap as true will constraint the List to take only the space it requires. If shrinkWrap is not set true, it will take infinite space and throw error. Also you need set scrollPhysics as NeverScrollablePhysics if you have SingleChildScrollView as the Parent Widget.

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search