Flutter/ 3 Rows in one Container or AlertDialog

Issue

I’m trying to make an Alert Dialog with a navigation window. There should be 3 Rows with different IconButtons to Navigate on another site. Unfortunately I’m new to Flutter and don’t know how to make 2 more Rows. Can someone please help me? Is it even possible to do that? I mean I can’t add any more children or can I? I Don’t know if i should split it in 3 AlertDialogs or is that stupid?

That was my Layout for the first Row

This is what it should look like but with 3 lines and not two, so that the code that i have right now can be copied to make 3 identical rows parallel

Code:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void popup(BuildContext context) {
  var alertDialog = AlertDialog(
    backgroundColor: Color(0xffb09c84),
    title: Text(''),
    content: Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.newspaper,
                  size: 44.0,
                ),
                onPressed: () {},
              ),
              SizedBox(height: 2.0),
              Container(
                child: Text(
                  "       Zeitung",
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.envelope,
                  size: 44.0,
                ),
                onPressed: () {},
              ),
              SizedBox(height: 2.0),
              Container(
                child: Text(
                  "    News",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
          Column(
            children: [
              IconButton(
                icon: FaIcon(
                  FontAwesomeIcons.creativeCommonsSampling,
                  color: Colors.black,
                  size: 44.0,
                ),
                onPressed: () {},
              ),
              SizedBox(
                height: 3.0,
              ),
              Container(
                child: Text(
                  "   Vertretung",
                  style: TextStyle(
                    fontSize: 14.0,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );

  showDialog(context: context, builder: (BuildContext context) => alertDialog);
}

 

Solution

This is your code now:

 Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: //Row(..the rest you want to copy"

Add a column before this row, and replicate your Row three times:

 Container(
      constraints: BoxConstraints(minWidth: 0, maxWidth: 300, maxHeight: 600),
      padding: EdgeInsets.all(0),
      width: 300.0,
      height: 560.0,
      child: Column( children: [ 
        Row1("..the rest you want to copy"),
        Row2("..the rest you want to copy"),
        Row3("..the rest you want to copy)" 
     ]), //Column
   ), //Container

Answered By – Huthaifa Muayyad

Answer Checked By – Robin (FlutterFixes Admin)