CODEWITHSUNDEEP
flutterflutter-layout
Anirudh Sukumaran
Anirudh Sukumaran

Reputation: 105

"How to create two text widgets in a row widget"

"I'm a beginner in flutter, I want to display two text in row .where "hello" is the first text widget and "world" is another text widget

I tried doing this with my basic knowledge but I came across these errors

Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined. 'package:flutter/src/rendering/flex.dart': Failed assertion: line 439 pos 18: 'textDirection != null'

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        Text("hello",textDirection: TextDirection.rtl,),
        Text("world",textDirection: TextDirection.rtl,)
      ],
    );
  }
}

Upvotes: 5

Views: 10465

Answers (5)

Kode Gil
Kode Gil

Reputation: 1

I changed the 'Row' into 'Column' and it worked

child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text(
                'Good Morning!',
                style: TextStyle(color: Colors.green, fontSize: 30),
              ),
              Text('scott'),
              GradientContainer(),
              textMy(),
            ],
          ),

Upvotes: 0

Igor Kharakhordin
Igor Kharakhordin

Reputation: 9933

Maybe you want to use RichText instead?

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(text: 'hello', style: TextStyle(color: Colors.red)),
      TextSpan(text: ' world', style: TextStyle(color: Colors.blue)),
    ],
  ),
)

Upvotes: 14

miguelik
miguelik

Reputation: 525

Please read this link about Row in Flutter:

https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041

In a nutshell, you Declare a Row and the items that will be inside that row are the children (Which must be widgets).

I picked an example from here https://flutter.dev/docs/development/ui/layout

something like this

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Image.asset('images/pic1.jpg'),
    Image.asset('images/pic2.jpg'),
    Image.asset('images/pic3.jpg'),
  ],
);

In Your case, you just have to erase the image.asset and change it for texts...

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Hello'),
    Text('World'),

  ],
);

or whatever you want.

Upvotes: 1

Aamil Silawat
Aamil Silawat

Reputation: 8239

**Try This Simplest Way**

import 'package:flutter/material.dart';
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Row(
          children: <Widget>[
        Text("Hello"),
        Text("World"),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Dhaval Patel
Dhaval Patel

Reputation: 409

Please try below code:-

@override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Hello",style: TextStyle(color: Colors.blue)),
        Text("World",style: TextStyle(color: Colors.blue))
      ],
    );
}

Upvotes: 0

Related Questions