I want the text and icon together in a line under one widget in body

Question

I want the text and icon together in a line under one widget in body. I tried and I got the following error

Too many positional arguments, 0 expected but 1 received

Can Any one help me with this? Thanks in advance!

void main() => runApp(const Myapp());

class Myapp extends StatefulWidget {
  const myapp({Key? key}) : super(key: key);
  _MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.only(top: 30),

          child: Stack(
            alignment: AlignmentDirectional.center,

            children: <Widget>[
              /** Positioned WIdget **/

              Positioned(
                top: 0.0,
                child: Image.asset(
                  'images/logo.png',
                  height: 150,
                  width: 150,
                ),
              ),
              //Positioned

              /** Positioned WIdget **/

              //Positioned
            ], //<Widget>[]
          ), //Stack
        ),

        Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Click'),
      WidgetSpan(child: Icon(Icons.add)),
      TextSpan(text: 'to add'),
    ],
  ),
)
        
      ),
    );
  }
}

In which line/widget you were facing error? – Harsh Sureja Feb 10 '23 at 07:14 — Harsh Sureja, Feb 10 '23 at 07:14
please give rough idea image that you want result – Sachin Kumawat Feb 10 '23 at 07:43 — Sachin Kumawat, Feb 10 '23 at 07:43

score 0 · Answer 1 · answered Feb 10 '23 at 07:13

First, the error "Too many positional arguments, 0 expected but 1 received", is due to the fact that the placement of RichText is outside the Stack Widget children. (The square brackets [].)

To achieve the desired output as you mentioned in the question, use a row specified in code comments with the attached code.

void main() => runApp(const Myapp());

class Myapp extends StatefulWidget {
  const Myapp({Key? key}) : super(key: key);
  @override
  _MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(top: 30),

          child: Stack(
            alignment: AlignmentDirectional.center,

            children: const <Widget>[
              /** Positioned WIdget **/
              // Positioned(
              //   top: 0.0,
              //   child: Image.asset(
              //     'images/logo.png',
              //     height: 150,
              //     width: 150,
              //   ),
              // ),

              /** Positioned WIdget **/
              
              /// This is where the RichTextWidget should be
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(text: 'Click'),
                    WidgetSpan(child: Icon(Icons.add)),
                    TextSpan(text: 'to add'),
                  ],
                ),
              ),
              /// Additionally, use a Row([Text,Icon,Text]) and use
              /// crossAxisAlignment Property to align the children
            ], //<Widget>[]
          ), //Stack
        ),
        /// You placed the below RickText outside the Stack, it should be above in the Widget[] of the stack.
        //  Text.rich(
        //   TextSpan(
        //     children: [
        //       TextSpan(text: 'Click'),
        //       WidgetSpan(child: Icon(Icons.add)),
        //       TextSpan(text: 'to add'),
        //       ],
        //     ),
        //   )
      ),
    );
  }
}

If I try text code in 'stack' or 'padding', the text is placed over the image. But I want the text under the image. Can you help me with this? — Priya, Feb 10 '23 at 07:31

score 0 · Answer 2 · answered Feb 10 '23 at 07:38

If you want to place a button with title and icon then you can use TextButton.icon instead of putting it inside a row or putting inside RichText.

Here's the button example:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.mail),
          label: const Text("Title"),
        ),
      ),
    );
  }
}

Then you can put it inside a stack and assign a background image in it. You can use Positioned.fill and then try modifying the parameters until it matches your requirment.

Sachin Kumawat · Answer 3 · 2023-02-10T08:15:56.630

caffold(
      body: Center(
        child: Container(color: Colors.lightGreen,
          height: 200,
          width: 200,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children:  <Widget>[
              Positioned(child: Image.asset("assets/test.png")),
              const Text.rich(
                TextSpan(
                  children: [
                    TextSpan(text: 'Click'),
                    WidgetSpan(child: Icon(Icons.add)),
                    TextSpan(text: 'to add'),
                  ],
                ),
              ),
            ], //<Widget>[]
          ),
        ),
      ),
    )

I want the text and icon together in a line under one widget in body

3 Answers3