I am new to flutter and i think i have misunderstood the widget and layout system-CodePudding

If I want to add more buttons and text widgets where and how should I do it, should I make some sort of colum and row system or am I totaly of?. And is my code programmed wrong?

import 'package:flutter/material.dart';

void main() {
  runApp(
    const HomeScreen(),
  );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Dice'),
              centerTitle: true,
            ),
            body: const Dice()));
  }
}

class Dice extends StatefulWidget {
  const Dice({Key? key}) : super(key: key);

  @override
  State<Dice> createState() => _DiceState();
}

class _DiceState extends State<Dice> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(
        children: [
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/1.png'))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/2.png'))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/3.png'))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/4.png'))),
          Expanded(
              child: Container(
                  margin: const EdgeInsets.all(15),
                  child: Image.asset('images/5.png')))
        ],
      ),
    ));
  }

}

I am going to add variables to the children in the container later.

CodePudding user response：

For better understanding I would recommend you checking out this medium article. https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e Here you can view all the important layout widgets you can use.

In general you have a widget tree starting by MaterialApp and you can add as many items as you want. In flutter if you want multiple widgets you can use Row and Columm for that. Both of them provides a children property in brackets [] there you can add multiple widgets inside separated by comma.

Most of the other widgets are also able to provide a children property where you can add even more children widgets. That’s how the widget tree in general works. Actually you have unlimited possibility’s.

Your code is totally fine. By the way you can also create custom widgets if the plenty widgets of flutter doesn’t fit your use case.

In your example you can add whatever you want in your row, text, more images, buttons, everything you like.

Here you can check out the official widget catalog of flutter: https://docs.flutter.dev/development/ui/widgets

CodePudding user response：

You can place a Column/ListView in between your Center and Row widgets, then you could add multiple rows to it like below:

class _DiceState extends State<Dice> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Column(
                    children: [
                        Row(
                            children: [
                                Expanded(
                                    child: Container(
                                        margin: const EdgeInsets.all(15),
                                        child: Image.asset('images/1.png'))),
                                Expanded(
                                    child: Container(
                                        margin: const EdgeInsets.all(15),
                                        child: Image.asset('images/2.png'))),
                                Expanded(
                                    child: Container(
                                        margin: const EdgeInsets.all(15),
                                        child: Image.asset('images/3.png'))),
                                Expanded(
                                    child: Container(
                                        margin: const EdgeInsets.all(15),
                                        child: Image.asset('images/4.png'))),
                                Expanded(
                                    child: Container(
                                        margin: const EdgeInsets.all(15),
                                        child: Image.asset('images/5.png')))
                                ],
                            ),
                        Row(children: [/* more content here */]),
                    ],
                ),
            ),
        );
    }
}