Как вывести текст снизу в flutter, не затрагивая другие виджеты?

#flutter #dart

#трепетание #дротик

Вопрос:

Когда я когда-либо пытаюсь вывести текст «Сколько?» в нижней части экрана немного выше ползунка, он выдает ошибку, называемую «переполнение дна на 31 пиксель». Пожалуйста, помогите мне это исправить!

Изображение приложения

Код: https://gist.github.com/predak821/b2577839eec0e0da51acb9a9b96d8172

Ответ №1:

Добавить Spacer() виджет после первого контейнера

 class SliderWidget extends StatefulWidget {
  @override
  SiderWidgetState createState() => new SiderWidgetState();
}

class SiderWidgetState extends State {
  int valueHolder = 20;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Text(
            'How many?',
            style: TextStyle(fontSize: 18),
          ),
        ),
        Spacer(),
        Container(
          child: Slider(
            value: valueHolder.toDouble(),
            min: 1,
            max: 100,
            divisions: 100,
            activeColor: Colors.green,
            inactiveColor: Colors.grey,
            label: '${valueHolder.round()}',
            onChanged: (double newValue) {
              setState(() {
                valueHolder = newValue.round();
              });
            },
            semanticFormatterCallback: (double newValue) {
              return '${newValue.round()}';
            },
          ),
        ),
        Text(
          '$valueHolder',
          style: TextStyle(fontSize: 20),
        )
      ],
    );
  }
}

Ответ №2:

Удалите это:

 margin: EdgeInsets.fromLTRB(0, 540, 0, 0),

Добавьте разделитель () между двумя контейнерами:

 Container(
        // margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
        child: Text(
          'How many?',
          style: TextStyle(fontSize: 18),
        ),
      ),
Spacer(),
Container(...

1. как мне вывести текст «сколько?» также в нижней части экрана, немного выше ползунка?

2. Хорошо, тогда вы должны переместить разделитель () в самый первый элемент. Не забудьте удалить «margin: EdgeInsets.fromLTRB(0, 540, 0, 0)» линия

3. Вы можете просмотреть мое перо здесь: codepen.io/teddichiiwa/pen/poEzQyw

Ответ №3:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('Randomizer')),
            body: Center(child: SliderWidget())));
  }
}

class SliderWidget extends StatefulWidget {
  @override
  SiderWidgetState createState() => new SiderWidgetState();
}

class SiderWidgetState extends State {
  int valueHolder = 20;

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end, //<---Change
          children: [
          
      Container(
        // margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
        child: Text(
          'How many?',
          style: TextStyle(fontSize: 18),
        ),
      ),
      Container(
          margin: EdgeInsets.fromLTRB(0, 0, 0, 0), // <-------------Change Here
          child: Slider(
              value: valueHolder.toDouble(),
              min: 1,
              max: 100,
              divisions: 100,
              activeColor: Colors.green,
              inactiveColor: Colors.grey,
              label: '${valueHolder.round()}',
              onChanged: (double newValue) {
                setState(() {
                  valueHolder = newValue.round();
                });
              },
              semanticFormatterCallback: (double newValue) {
                return '${newValue.round()}';
              })),
      Text(
        '$valueHolder',
        style: TextStyle(fontSize: 20),
      )
    ]));
  }

Попробуйте это, это приведет к чему-то вроде этого.

Ответ №4:

Это потому, что вы жестко задали поле с фиксированными значениями. Из-за этого, даже если вы измените значение и исправите его на экране разработки, проблема будет видна на устройстве с другим размером экрана.

Вместо этого, если вы хотите, чтобы некоторые виджеты были внизу экрана, вы можете использовать Выравнивание:

 Align(
      alignment: Alignment.bottomCenter,
      child: // your widget
      );

В дочернем элементе вы можете поместить ползунок и нужный текст под виджет столбца.