Scaffold in main.dart not compiling

Question

Apologize for asking; I'm new to programming and I'm trying to pickup flutter. I'm been playing around with its layout.

But when I try to build a mobile app that runs many hand-made a widgets that imports into main.dart something like this:

import 'package:flutter/material.dart';
import 'package:flutterproject/screen/first-Widget.dart';
import 'package:flutterproject/screen/seconds-Widget.dart';
import 'package:flutterproject/screen/Third-Widget.dart';

          body:
          Container(
            child: first-Widget(),
          ),
          Container(
            child: seconds-Widget(),
          ),
          Container(
            child: Third-Widget(),
          ),

But when I do design (above) system rise error; having too many position argument, I try another one

import 'package:flutter/material.dart';
import 'package:flutterproject/screen/first-Widget.dart';
import 'package:flutterproject/screen/seconds-Widget.dart';
import 'package:flutterproject/screen/Third-Widget.dart';

          body:
          children: <Widget>[
            Container(
              child: first-Widget(),
            ),
            Container(
              child: seconds-Widget(),
            ),
            Container(
              child: Third-Widget(),
            ),
         ]

This design, system rise error; where children are not defined

This is some of the tutorials I been going through;

1. https://flutter.dev/docs/development/ui/layout
2. https://www.youtube.com/watch?v=azkqq0FNHuk&t=589s&ab_channel=FlutterCrashCourse

I'm running flutter 1.5 on window 7 and using Android studio as the IDE

I appreciate if you could help me this newcomer

Edited or addon

I edited the first-widget to something like this;

return new Container(
  child:
    Column(children: <Widget>[
           Row(
                children: <Widget>[
                //image & text
               ])//row

           ])//Column

  child: Expanded(
          child: Row(
              children: <Widget>[
                     //text & image
                     ])//row
               )//expanded
)//container

This issue if I don't add container I can't return the widget to main.dart files, but the container doesn't have a children-widget

end of the day my issue is I'm unable to return multiplier handmade widget into main.dart files.

Answer 1

First of all components in Flutter are not functions, they are called Widgets. You need to have a rough idea about the widgets in flutter. I suggest you go through this and get an idea Layout Widgets

So you are trying to build a view like this

First analyze the design and try to categorize them into flutter widgets. So you should see 3 groups of widgets in a row. So the first Widget is a Row.

body: Row(
     children: <Widget>[

]
) 

Now analyze a single widget in the row. I can see an Icon and a Text in Column. To implement that,

Column(
    Icon(Icons.star),
    Text("CALL")
)

Finally,

body: Row(
     children: <Widget>[
           Column(
            children: <Widget>[
                Icon(Icons.star),
                Text("CALL"),
            ]),
            Column(
            children: <Widget>[
                Icon(Icons.star),
                Text("ROUTE")
            ]),
            Column(
            children: <Widget>[
                Icon(Icons.star),
                Text("SHARE"),
            ]),
]
) 

``