Question 74670 in Flutter Question posted in
The official Flutter documentation can be found here.

Problem with a simple layout in Flutter, just 3 elements below each other, without using MaterialApp

In flutter I am trying to build a very basic thing. Three elements on top of each other and vertically centered, like this:

enter image description here

I don’t want to use MaterialApp, so my code for now is this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.black),
      child: Row(children: [
        Column(
          children: const <Widget>[Text('ELE1')],
        ),
        Column(
          children: const <Widget>[Text('ELE2')],
        ),
        Column(
          children: const <Widget>[Text('ELE3')],
        ),
      ]),
    );
  }
}

But I am getting an error:

ErrorSummary(‘No Directionality widget found.’),

Which is odd because I thought a column could be contained in a row which in turn could be contained in a container, no ?

Tags:

2

Answers


  1. 0

    if you need to use MaterailApp this is how you use it

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}


class MyHome extends StatelessWidget {
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Container(
            decoration: const BoxDecoration(color: Colors.white),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const <Widget>[
                Text('ELE1'),
                Text('ELE1'),
                Text('ELE1')
              ],
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Rows are horizontal, Columns vertical. Just replacing that Row with a Column might do the trick for you, but it also it doesn’t make sense to have each Text wrapped in its own Column. So just replace

    Row(children: [
    Column(
      children: const <Widget>[Text('ELE1')],
    ),
    Column(
      children: const <Widget>[Text('ELE2')],
    ),
    Column(
      children: const <Widget>[Text('ELE3')],
    ),
  ]),

    with

    Column(children: [Text('ELE1'), Text('ELE2'), Text('ELE3')]),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search