Выбор между разными отступами во Flutter

Question

Я занимаюсь домашней автоматизацией, и я хочу выбрать между отступами, поэтому, например, есть один, у которого есть «Вкл.» И «Выкл.», И другой, у которого есть «Блокировать» и «Разблокировать». . Я попытался создать функцию, поэтому я вызываю каждую из них в разных случаях, но, к сожалению, это не сработало.
У меня есть функция, которая создает CustomCards, я вызываю эту функцию внутри своего основного файла, поэтому я могу создать карты с одинаковым лицом.
Вот мой код:

class CustomCard extends StatelessWidget {
final bool isActive;
final String text;
final IconData iconData;
final VoidCallback onTap;

const CustomCard({
this.isActive,
this.text,
this.iconData,
this.onTap,
});

@override
Widget build(BuildContext context) {
return InkWell(
  onTap: onTap,
  child: Container(
    height: 100,
    width: 100,
    child: Card(
      color: isActive ? Colors.white : Colors.grey[800],
      semanticContainer: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      margin: new EdgeInsets.all(0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(left: 4,top: 7, right: 30, bottom: 10),
                child: Icon(
                  iconData,
                  color: isActive ? Colors.black : Colors.white,
                  size: 35,
                ),
              ),
              Padding(
                padding:
                EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                child: new Text(
                  isActive ? 'On' : 'Off',
                  style: TextStyle(
                      color: isActive ? Colors.black : Colors.white),
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(top: 8, left: 5),
              child: Text(
                text,
                style: TextStyle(
                    color: isActive ? Colors.black : Colors.white,
                    fontSize: 13),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
  );
 }
 }

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

Padding(
                padding:
                EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                child: new Text(
                  isActive ? 'On' : 'Off',
                  style: TextStyle(
                      color: isActive ? Colors.black : Colors.white),
                ),
              ),

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

 List<bool> cardsValue = [false, false, false, false];

 CustomCard(
                    iconData: cardsValue[0] ? OMIcons.lock : OMIcons.lockOpen,
                    text: 'Front\nDoor Lock',
                    isActive: cardsValue[0],
                    onTap: () {
                      setState(() {
                        cardsValue[0] = !cardsValue[0];
                      });
                    },
                  ),
                  SizedBox(width: 30.0),
                  CustomCard(
                    iconData: Icons.lightbulb_outline,
                    text: 'Lâmpada 2 Schuma',
                    isActive: cardsValue[1],
                    onTap: () {
                      setState(() {
                        cardsValue[1] = !cardsValue[1];
                      });
                    },
                  ),

Answer 1

Если я правильно понял, вы ищете одинаковые виджеты с разными метками (иногда «вкл / выкл», а иногда «блокировать / разблокировать»).

У вас могут быть две разные переменные для определения этих этикетки. Я сделал это так:

import 'package:flutter/material.dart';

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<bool> cardsValue = [false, false, false, false];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomCard(
              activeLabel: 'Lock',
              inActiveLabel: 'Unlock',
              iconData: cardsValue[0] ? Icons.lock : Icons.lock_open,
              text: 'Front\nDoor Lock',
              isActive: cardsValue[0],
              onTap: () {
                setState(() {
                  cardsValue[0] = !cardsValue[0];
                });
              },
            ),
            SizedBox(width: 30.0),
            CustomCard(
              activeLabel: 'On',
              inActiveLabel: 'Off',
              iconData: Icons.lightbulb_outline,
              text: 'Lâmpada 2 Schuma',
              isActive: cardsValue[1],
              onTap: () {
                setState(() {
                  cardsValue[1] = !cardsValue[1];
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  final bool isActive;
  final String text;
  final String activeLabel;
  final String inActiveLabel;
  final IconData iconData;
  final VoidCallback onTap;

  const CustomCard({
    this.isActive,
    this.text,
    this.iconData,
    this.onTap,
    this.activeLabel,
    this.inActiveLabel,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 100,
        width: 120,
        child: Card(
          color: isActive ? Colors.white : Colors.grey[800],
          semanticContainer: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          margin: new EdgeInsets.all(0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding:
                        EdgeInsets.only(left: 4, top: 7, right: 30, bottom: 10),
                    child: Icon(
                      iconData,
                      color: isActive ? Colors.black : Colors.white,
                      size: 35,
                    ),
                  ),
                  Padding(
                    padding:
                        EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                    child: new Text(
                      isActive ? activeLabel : inActiveLabel,
                      style: TextStyle(
                          color: isActive ? Colors.black : Colors.white),
                    ),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: EdgeInsets.only(top: 8, left: 5),
                  child: Text(
                    text,
                    style: TextStyle(
                        color: isActive ? Colors.black : Colors.white,
                        fontSize: 13),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Изменения на основе комментария:

Если вам нужно только изменить отступ вокруг метки, вы также можете определить параметр заполнения для виджета следующим образом :

import 'package:flutter/material.dart';

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<bool> cardsValue = [false, false, false, false];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomCard(
              padding: EdgeInsets.only(top: 0, right: 0, bottom: 10, left: 0),
              activeLabel: 'Lock',
              inActiveLabel: 'Unlock',
              iconData: cardsValue[0] ? Icons.lock : Icons.lock_open,
              text: 'Front\nDoor Lock',
              isActive: cardsValue[0],
              onTap: () {
                setState(() {
                  cardsValue[0] = !cardsValue[0];
                });
              },
            ),
            SizedBox(width: 30.0),
            CustomCard(
              padding: EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
              activeLabel: 'On',
              inActiveLabel: 'Off',
              iconData: Icons.lightbulb_outline,
              text: 'Lâmpada 2 Schuma',
              isActive: cardsValue[1],
              onTap: () {
                setState(() {
                  cardsValue[1] = !cardsValue[1];
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  final bool isActive;
  final String text;
  final String activeLabel;
  final String inActiveLabel;
  final IconData iconData;
  final EdgeInsetsGeometry padding;
  final VoidCallback onTap;

  const CustomCard({
    this.isActive,
    this.text,
    this.padding,
    this.iconData,
    this.onTap,
    this.activeLabel,
    this.inActiveLabel,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 100,
        width: 120,
        child: Card(
          color: isActive ? Colors.white : Colors.grey[800],
          semanticContainer: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          margin: new EdgeInsets.all(0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding:
                        EdgeInsets.only(left: 4, top: 7, right: 30, bottom: 10),
                    child: Icon(
                      iconData,
                      color: isActive ? Colors.black : Colors.white,
                      size: 35,
                    ),
                  ),
                  Padding(
                    padding: padding,
                    child: new Text(
                      isActive ? activeLabel : inActiveLabel,
                      style: TextStyle(
                          color: isActive ? Colors.black : Colors.white),
                    ),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: EdgeInsets.only(top: 8, left: 5),
                  child: Text(
                    text,
                    style: TextStyle(
                        color: isActive ? Colors.black : Colors.white,
                        fontSize: 13),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Но вы также можете определить дочерний элемент и значок как widget, поэтому для каждого из этих виджетов вы можете делать любую конфигурацию, которую хотите.

import 'package:flutter/material.dart';

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<bool> cardsValue = [false, false, false, false];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomCard(
              icon: Padding(
                padding: EdgeInsets.only(
                  left: 4,
                  top: 7,
                  right: 30,
                  bottom: 10,
                ),
                child: Icon(
                  cardsValue[0] ? Icons.lock : Icons.lock_open,
                  color: cardsValue[0] ? Colors.black : Colors.white,
                  size: 35,
                ),
              ),
              child: Padding(
                padding: EdgeInsets.only(
                  left: 0,
                  top: 7,
                  right: 0,
                  bottom: 10,
                ),
                child: new Text(
                  cardsValue[0] ? 'Lock' : 'Unlock',
                  style: TextStyle(
                    color: cardsValue[0] ? Colors.black : Colors.white,
                  ),
                ),
              ),
              label: 'Front\nDoor Lock',
              isActive: cardsValue[0],
              onTap: () {
                setState(() {
                  cardsValue[0] = !cardsValue[0];
                });
              },
            ),
            SizedBox(width: 30.0),
            CustomCard(
              icon: Padding(
                padding: EdgeInsets.only(
                  left: 4,
                  top: 7,
                  right: 30,
                  bottom: 10,
                ),
                child: Icon(
                  Icons.lightbulb_outline,
                  color: cardsValue[1] ? Colors.black : Colors.white,
                  size: 35,
                ),
              ),
              child: Padding(
                padding: EdgeInsets.only(
                  left: 4,
                  top: 7,
                  right: 20,
                  bottom: 10,
                ),
                child: new Text(
                  cardsValue[1] ? 'On' : 'Off',
                  style: TextStyle(
                    color: cardsValue[1] ? Colors.black : Colors.white,
                  ),
                ),
              ),
              label: 'Lâmpada 2 Schuma',
              isActive: cardsValue[1],
              onTap: () {
                setState(() {
                  cardsValue[1] = !cardsValue[1];
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  final bool isActive;
  final Widget child;
  final String label;
  final Widget icon;
  final VoidCallback onTap;

  const CustomCard({
    this.isActive,
    this.child,
    this.label,
    this.icon,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 100,
        width: 120,
        child: Card(
          color: isActive ? Colors.white : Colors.grey[800],
          semanticContainer: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          margin: new EdgeInsets.all(0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: <Widget>[icon, child],
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: EdgeInsets.only(top: 8, left: 5),
                  child: Text(
                    label,
                    style: TextStyle(
                        color: isActive ? Colors.black : Colors.white,
                        fontSize: 13),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

Вы можете это сделать, но вы должны подумать: «Кому это нужно?»

1. Если состояние вашей карты изменится в родительском представлении, вы можете использовать виджет без сохранения состояния и перестроить новое состояние, например этот код. Вы не забудьте объявить эту функцию родительской страницей, так что заверните всю карточку и перестройте состояние. (Не рекомендуется смотреть на 2)

   void changeSwitchButton () {setState (() {isActiveOnView =! IsActiveOnView;}); }

Вы хотите здесь: https://gist.github.com/0ec9fca4bd246b21276505ae87cd815b

Вы создаете виджет с отслеживанием состояния на полной карточке, потому что вашему виджету карточки требуется состояние (параметры восстановления). Если карта имеет собственное состояние, самоизменение виджета карты при просмотре не требует никаких родительских изменений. Этот метод более правильный, чем другая ситуация.

Сборка виджета (контекст BuildContext) {return InkWell (onTap: onTapCard, child: buildContainerCard (),); } void onTapCard () {setState (() {isActive =! isActive;}); widget.onTap (); }

Подробнее см. это репо. (Библиотека / включение)

Answer 3

Попробуйте изменить CustomCard на stateFull Widget.