So I use Firebase as my backend. The String about which Im talking looks like this:

When I add this String as a variable in my Text Widget

Text("${beschreibung}")

the text doesn't automatically line break, its just cut off by the right side of the screen

How can I achieve a behaviour where this doesn't happen & get flutter to detect the spaces to automatically line break?

Additional Details

Here Im getting the data from firebase and passing it on:

class Produkte extends StatelessWidget {
  final Stream<QuerySnapshot> data =
      FirebaseFirestore.instance.collection("products").snapshots();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Container(
              width: MediaQuery.of(context).size.width,
              child: StreamBuilder<QuerySnapshot>(
                stream: data,
                builder: ((BuildContext context,
                    AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (snapshot.hasError) {
                    return Text("Some error");
                  }
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Text("loading");
                  }
                  final data = snapshot.requireData;
                  return Container(
                      height: 800,
                      child: GridView.builder(
                        itemCount: data.size,
                        itemBuilder: (context, index) {
                          return ProductTile(
                              titel: data.docs[index]["Name"].isNotEmpty
                                  ? data.docs[index]["Name"]
                                  : " ",
                              beschreibung:
                                  data.docs[index]["Beschreibung"].isNotEmpty
                                      ? data.docs[index]["Beschreibung"]
                                      : " ");
                        },
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            mainAxisSpacing: 5,
                            crossAxisSpacing: 2),
                      ));
                }),
              ),
            ),
      ),
    );
  }
}

& here Im using the data

    class Produkt extends StatelessWidget {
  Produkt({required this.titel, required this.beschreibung});

  final List<String> beschreibung;
  final String titel;
  @override
  Widget build(BuildContext context) {
    return Scaffold(body:
                          Container(
                            height: 350,
                            child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: beschreibung.length,
                              itemBuilder: (context, index) {
                                return Text("${beschreibung[index]}");
                              },
                            ),
                          ),
                        
    );
  }
}

CodePudding user response：

Add width to the container so the text knows where to break and use a new line and remove the axis horizontal..

return Scaffold(body:
                          Container(
                            height: 350,
    width: MediaQuery.of(context).size.width,
                            child: ListView.builder(
                              
                              itemCount: beschreibung.length,
                              itemBuilder: (context, index) {
                                return Text("${beschreibung[index]}");
                              },
                            ),
                          ),

If you wish to keep the horizontal scroll but still have the text in one screen then add a container to the text

return Scaffold(body:
                          Container(
                            height: 350,
                            child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: beschreibung.length,
                              itemBuilder: (context, index) {
                                return Container( width: MediaQuery.of(context).size.width,
    child : Text("${beschreibung[index]}")
);
                              },
                            ),
                          ),