Как удалить пространство, лежащее между двумя контейнерами во флаттере?

Я хочу нарисовать виджет таблицы на своем экране. Это мой код:

body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Container(
               padding: const EdgeInsets.all(10),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.grey.shade400,
                   border: Border.all(
                       color: Colors.black, // Set border color
                       width: 1.5),   // Set border width
               ),
               child: const Text("EMPLOYEE DETAILS",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Lobster')),
            ),     
            Container(
               margin: const EdgeInsets.all(20),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.blue.shade300,
                   border: Border.all(
                       color: Colors.black, // Set border color
                       width: 1.0),   // Set border width
               ),
               child:Table(
                   border: TableBorder.all(
                       color: Colors.black,
                       style: BorderStyle.solid,
                       width: 2),
                   children: [
                       TableRow( children: [
                           Column(children:const [Text('Employee No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Employee Name')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Designation')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Department')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('BU/Station')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Qtr No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                  ],
            ),
         ),

После выполнения кода я обнаружил, что между двумя контейнерами есть ненужное пространство.

Как удалить пространство, лежащее между двумя контейнерами во флаттере?

Почему там космос? Как убрать это пространство?

поле: const EdgeInsets.all(20), -> поле: const EdgeInsets.all(0),

Fugipe 22.11.2022 11:46
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пустое пространство было получено из параметра поля, поле устанавливает запасное значение на внешней границе и отступы внутри. Комментарий

поле: const EdgeInsets.all(20)

Просто найдите в Google информацию о разнице между полями и отступами. Или вот еще вопрос по тому же поводу.

в чем разница между полями и отступами в виджете Container с использованием фреймворка Flutter?

Ответ принят как подходящий

Он исходит из поля во втором контейнере. Если вы хотите удалить верхнее поле контейнера, используйте -

поле: const EdgeInsets.only (слева: 20, справа: 20, снизу: 20)

Это даст вам желаемый результат. Надеюсь, это полезно.

Другие вопросы по теме