简体   繁体   中英

I am having some troubles with the flutter align widget

I try to align the child with bottomCenter. The child widget is positioned in the middle but not in the bottom of the screen.

Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    padding: EdgeInsets.all(10),
    margin: EdgeInsets.all(10),
    child: Text('Player 1:'),
  ),
),

This align widget is in a column so it might be some column height error. And when I add expanded I get a error:

Another exception was thrown: RenderBox was not laid out: RenderFlex#64524 relayoutBoundary=up1 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE

All of the code is here:

import 'package:flutter/material.dart';
import 'dart:math';

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: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Dice(),
              ],
            )));
  }
}

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

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

class _DiceState extends State<Dice> {
  List dices = [
    5,
    5,
    5,
    5,
    5,
  ];

  List showingdices = [
    5,
    5,
    5,
    5,
    5,
  ];

  var pointcount = 0;

  int setnum = 0;
  rolldices() {
    for (int i = 0; i < dices.length; i++) {
      if (dices[i] != 0) {
        setState(() {
          setnum = Random().nextInt(6) + 1;
          dices[i] = setnum;
          showingdices[i] = setnum;
        });
      }
    }

    points();
  }

  int pointer = 0;

  points() {
    int stopper = 0;
    var map = {};

    for (var element in dices) {
      if (!map.containsKey(element)) {
        map[element] = 1;
      } else {
        map[element] += 1;
        if (map[element] == 3) {
          if (element == 1) {
            pointer = element * 1000;
          } else {
            pointer = element * 100;
          }

          for (var thing in dices) {
            if (thing == element && stopper < 3) {
              stopper += 1;
              dices[dices.indexOf(element)] = 0;
            }
          }
        }
      }
    }
    for (var element in dices) {
      if (element == 1) {
        pointer += 100;
        setState(() {
          dices[dices.indexOf(element)] = 0;
        });
      }
      if (element == 5) {
        pointer += 50;
        setState(() {
          dices[dices.indexOf(element)] = 0;
        });
      }
    }
    setState(() {
      pointcount += pointer;
    });
  }

  Reset() {
    setState(() {
      dices = [
        5,
        5,
        5,
        5,
        5,
      ];
      pointcount = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          pointcount.toString(),
          style: const TextStyle(fontSize: 20),
        ),
        Row(
          children: [
            Expanded(
                child: Container(
                    margin: const EdgeInsets.all(15),
                    child: Image.asset(
                        'images/' + showingdices[0].toString() + '.png'))),
            Expanded(
                child: Container(
                    margin: const EdgeInsets.all(15),
                    child: Image.asset(
                        'images/' + showingdices[1].toString() + '.png'))),
            Expanded(
                child: Container(
                    margin: const EdgeInsets.all(15),
                    child: Image.asset(
                        'images/' + showingdices[2].toString() + '.png'))),
            Expanded(
                child: Container(
                    margin: const EdgeInsets.all(15),
                    child: Image.asset(
                        'images/' + showingdices[3].toString() + '.png'))),
            Expanded(
                child: Container(
                    margin: const EdgeInsets.all(15),
                    child: Image.asset(
                        'images/' + showingdices[4].toString() + '.png')))
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
                onPressed: rolldices, child: const Text('Roll The Dice!🎲')),
            ElevatedButton(onPressed: Reset, child: const Text('Reset')),
          ],
        ),
        Expanded(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.all(10),
              child: Text('Player 1:'), //Your widget here,
            ),
          ),
        ),
      ],
    );
  }
}

If you are using a Column widget the default of its main axis alignment is center. If you wish to place it at the bottom center try adding Spacer inside the Column which will occupy all the available space. Make sure you have bounds for the column like

Sizedbox(
 height: MediaQuery.of(context).size.height,
 width : MediaQuery.of(context).size.width,
  child: Column(
    children: [
     //Other widgets here
       Spacer(),
       Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
          Text('player1'),
         ]
        )
      )
    ]
   )
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM