Flutter row multiline

Flutter Row Multiline:

The Row widget in Flutter is used to create a horizontal line of children widgets. By default, it arranges its children in a single line. However, you can make it multiline by using a combination of other Flutter widgets.

Example:

Let’s say we want to create a multiline row with four text widgets. Here’s how you can achieve that:

    
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiline Row Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiline Row'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Flexible(
                child: Text(
                  'Text 1',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              SizedBox(width: 16.0),
              Flexible(
                child: Text(
                  'Text 2',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              SizedBox(width: 16.0),
              Flexible(
                child: Text(
                  'Text 3',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              SizedBox(width: 16.0),
              Flexible(
                child: Text(
                  'Text 4',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
    
  

In the example above, we use the Row widget to create a horizontal line of children widgets. To make it multiline, we use the Flexible widget as a child of each text widget. The Flexible widget allows the text widget to take up all the available space, which makes it break into a new line when needed.

The SizedBox widget is used to add spacing between the text widgets. You can adjust the width as per your requirement.