Move Row Content Automatically To Next Line In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

In Flutter if we would use Row widget and start putting widgets inside it then once the width is filled it’ll start us show an Pixel error on device which is like impossible to solve. But using the Wrap widget of Flutter we can solve this problem within a few minutes. Wrap widgets automatically align the Widgets items one by one and if the Row is filled then it will move row content automatically to next line in flutter.

Move Row Content Automatically To Next Line In Flutter App

Row Content Automatically to Next Line

Complete Code For Row Content Automatically to Next Line In Flutter
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  ButtonFunction(){
    print('Function Called');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Color(0xFFCDDC39),
            title: Text('Row Content Automatically to Next Line'),
          ),
            body: Padding(
              padding: const EdgeInsets.all(30.0),
              child: Container(
                  child : Wrap(
                    alignment: WrapAlignment.spaceBetween,
                    direction: Axis.horizontal,

                    children: <Widget>[
                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 1 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 2 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 3 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 4 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 5 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 6 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 7 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),
                      Container(
                          margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child:
                          RaisedButton(
                            onPressed: () => ButtonFunction(),
                            child: Text(' Button 8 '),
                            textColor: Colors.white,
                            color: Color(0xFFCDDC39),
                            padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
                          )
                      ),

                    ],
                  )
              ),
            )
        )
    );
  }
}

 

Related Post