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

Обмен знаниями Flutter # 26

Добро пожаловать в еще одну историю обмена знаниями о Flutter. Flutter основан на виджетах. Поэтому вы должны свободно владеть виджетами. Здесь я объяснил функции, атрибуты и способы их использования каждого виджета на простых примерах. Вы можете легко получить хорошее представление об этих виджетах. На данный момент я обсудил 40 виджетов. пожалуйста, ознакомьтесь с моими предыдущими статьями, чтобы узнать о них. Если вы надеетесь стать лучшим разработчиком Flutter, это определенно вам поможет. Здесь я объяснил десять виджетов, которые встроены в Flutter SDK. Мне больше нечего сказать. Кроме того, мы должны экономить время, что наиболее важно. Теперь давайте обсудим эту тему.

Виджеты, виджеты, виджеты?

Контейнер
SelectableText
Таблица данных
Слайдер
AlertDialog
DraggableScrollableSheet
ColorFiltered
ToggleButtons
DefaultTabController и TabBar
Выдвижной ящик

Контейнер

Вам нужен виджет, которому нужно немного стилизовать фон во Flutter? Может быть, из-за ограничений по цвету, форме или размеру фона? Попробуйте обернуть его в виджеты контейнера. Этот виджет помогает составлять, украшать и размещать дочерние виджеты. Если вы заключите контейнерный виджет без каких-либо других параметров, вы не заметите никакой разницы. Вам нужно добавить параметры для изменения внешнего вида. Вы можете использовать следующие свойства с Контейнером.

Container({
  Key key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double width,
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform,
  this.child,
  this.clipBehavior = Clip.none,
})

SelectableText

Если вы хотите отображать текст, в вашем приложении можно выбрать. SelectableText предоставит вам именно такую возможность. SelectableText содержит все поля виджета Text. Таким образом, вы можете украсить текст, используя шрифт, цвет и т. Д. Вы можете показать, где будет начинаться ваш выбор, с помощью параметра ShowCursor. Настройте внешний вид курсора с помощью параметров cursorWidth, cursorRadius, sursorColour. Чтобы указать, какие действия доступны после выделения текста, используйте опцию панели инструментов. По умолчанию вы можете выбрать и скопировать его. Вы можете добавить обработчик onTap для ответа на один жест касания.

child: SelectableText(
  '10 Flutter Widgets you must know as a Flutter Developer',
  style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 20),
  textAlign: TextAlign.center,
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.black,
  cursorRadius: Radius.circular(2),
),

Таблица данных

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

DataTable(
  columns: [
    DataColumn(label: Text('IndexNo')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Result')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('1')),
      DataCell(Text('Ashley')),
      DataCell(Text('A')),
    ]),
    DataRow(cells: [
      DataCell(Text('2')),
      DataCell(Text('John')),
      DataCell(Text('B-')),

    ]),
    DataRow(cells: [
      DataCell(Text('3')),
      DataCell(Text('Tony')),
      DataCell(Text('A')),
    ]),
  ],
),

Вы можете использовать следующие свойства.

({
  Key key,
  @required this.columns,
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowColor,
  this.dataRowHeight,
  this.dataTextStyle,
  this.headingRowColor,
  this.headingRowHeight,
  this.headingTextStyle,
  this.horizontalMargin,
  this.columnSpacing,
  this.showCheckboxColumn = true,
  this.showBottomBorder = false,
  this.dividerThickness,
  @required this.rows,
})

Слайдер

Вы можете выбрать значение из любого диапазона с помощью виджета «Ползунок». Виджет «Ползунок» выбирает одно значение из диапазона. установите требуемую функцию onChange для ответа на действия пользователя. Укажите максимальное и минимальное значения переменных, чтобы выбрать диапазон. Ползунок с делениями будет застревать в определенных точках. Используйте параметры деления, чтобы установить количество точек, к которым будет прилипать ползунок. Установка параметра метки показывает метку над ползунком во время перетаскивания. Виджет RangeSlider использует для выбора двух значений диапазона.

Slider(
  value: _initvalue.toDouble(),
  min: 1.0,
  max: 10.0,
  divisions: 10,
  activeColor: Colors.green,
  inactiveColor: Colors.orange,
  label: 'Set value',
  onChanged: (double newValue) {
    setState(() {
      _initvalue = newValue.round();
    });
  },
)

AlertDialog

Есть ли в вашем приложении состояние, в котором пользователь должен принять решение? Вы хотите кого-то о чем-то предупредить? или, может быть, получить ввод пользователя ?. Попробуйте использовать AlertDialog. В зависимости от вашего дизайна пользовательского интерфейса вы можете настроить его.

AlertDialog(
  title: new Text('Confirm Exit...!!!'),
  actions: <Widget>[
    FlatButton(
      child: Text(
        "Yes",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    FlatButton(
      child: Text(
        "No",
        style: Theme.of(context)
            .textTheme
            .caption
            .copyWith(fontWeight: FontWeight.w600, color: Colors.blue),
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

DraggableScrollableSheet

Если вы хотите провести виджет в поле зрения, и вам нужно, чтобы этот виджет можно было прокручивать, когда он отображается на экране. Итак, для достижения обоих сразу вы можете использовать DraggableScrollableSheet. Во-первых, предоставьте аргумент строителя. Конструктор должен возвращать прокручиваемый виджет, например Listview. Вы также можете изначально указать минимальный и максимальный размеры виджета. Определяются как часть доступного пространства. Узнайте больше на следующем примере.

DraggableScrollableSheet(
  builder: (BuildContext context, ScrollController scrollController){
    return Container(
      color: Colors.white,
      child: ListView.builder(
          controller: scrollController,
          itemCount: 20,
          itemBuilder: (BuildContext context, int index){
            return ListTile(title : Text('Item $index'),);
          }),
    );
  },
)

ColorFiltered

Цвет большинства виджетов легко изменить. Но иногда это непросто изменить как параметр. Например, если бы вы хотели поиграть с цветом изображения? На данный момент цветового параметра недостаточно. В то время мы можем использовать виджет ColorFiltered. Вы можете попробовать разные фильтры. Вы также можете использовать его в группе виджетов. Это простой пример смешивания красного цвета с изображением.

ColorFiltered(
  colorFilter:  ColorFilter.mode(Colors.red, BlendMode.colorBurn),
  child: Image.asset('assets/GEOA.png'),
),

ToggleButtons

Вы хотите, чтобы ваши пользователи могли выбирать из ряда связанных вариантов ?. Задницы переключат кнопки в ваше приложение, чтобы сделать именно это. Чтобы создать свои кнопки-переключатели, предоставьте список виджетов, которые вы хотите использовать для этого набора кнопок. Cext, установите параметр isSelected, он содержит список логических значений той же длины, что и ваш список виджетов. Он будет контролировать, какие кнопки будут выбраны. Здесь мы контролируем, какие кнопки выбираются, с помощью переменной внутри виджета с отслеживанием состояния. Наконец, создайте onpressed метод, который будет реагировать, когда пользователь нажимает кнопку. Кроме того, вы можете настраивать все больше и больше.

List<bool> _isSelected = [false, true, false];
ToggleButtons(
  children: <Widget>[
    Icon(Icons.highlight_rounded),
    Icon(Icons.bluetooth),
    Icon(Icons.wifi),
  ],
  isSelected: _isSelected,
  onPressed: (int index) {
    setState(() {
      _isSelected[index] = !_isSelected[index];
    });
  },
),

DefaultTabController и TabBar

Обычно мы используем вкладки в наших приложениях. Мы можем добиться этого с помощью виджетов DefaultTabController, TabBar и TabBarView во Flutter. Чтобы использовать вкладки, сначала нужен контроллер вкладок, чтобы сохранить выбранную вкладку, а видимый контент синхронизируется. Самый простой способ сделать это с помощью DefaultTabController. После этого вам понадобится виджет для отображения вкладок, которые пользователь будет использовать для переключения различных разделов. TabBar принимает список виджетов вкладок. вы можете указать на вкладке текст, значок или указать дочерний виджет. Наконец, вам нужно создать контент для каждой вкладки.

Выдвижной ящик

Ящик обеспечивает переход к другим страницам. Это виджет, который мы можем использовать внутри виджета Scaffold. Я обсуждал это в истории виджетов sccafold, которую я опубликовал здесь ранее.

Класс Scaffold: должен знать каждый программист Flutter
Обмен знаниями о Flutter №10 medium.com

Заключение

Это пятая история про флаттер-виджеты. До сих пор я обсуждал 50 виджетов Flutter.

Эта история дает вам знания, еще десять виджетов Flutter, которые вы должны знать. Я надеюсь, что вы будете использовать их в своем следующем проекте Flutter. Не стесняйтесь задавать любой вопрос, с которым вы столкнетесь, в разделе ответов ниже.
Удачного кодирования !!!!
Вы нашли этот пост полезным? Пожалуйста, нажмите кнопку 👏 ниже! :)