Как использовать шестнадцатеричные цветовые строки во Flutter?

В то время как новые технологии открывают путь для кодирования, более 42% мировых разработчиков используют Flutter. Он поставляется как комплект для разработки программного обеспечения с открытым исходным кодом (SDK) от технического гиганта Google, бесплатный для всех разработчиков. Он имеет единую кодовую базу, которая помогает разработчикам создавать масштабируемые и высокопроизводительные приложения с функциональными пользовательскими интерфейсами для IOS или Android. Следовательно, наемный разработчик Flutter работает на самой высокой скорости.

Неудивительно, что Flutter обошел знаменитый React Native и стал первым предпочтением при разработке мобильных приложений. При создании приложений с помощью Flutter разработчикам приходится обращаться к файлу дизайна для создания пользовательского интерфейса приложения. Самый простой способ — скопировать цвет в строку шестнадцатеричного кода цвета. Давайте разберемся, как использовать эти шестнадцатеричные цветовые строки во Flutter.

Как работает Flutter?

Понять принцип работы Flutter очень просто. Это многоуровневая система со специальным фреймворком, встроенными средствами, специфичными для конкретной платформы, и движком. Все приложения Flutter создаются с использованием объектно-ориентированного языка программирования Dart от Google. Движок Flutter пишется на C или C++, а библиотека Skia формирует графические возможности Flutter.

Dart Framework: Содержит материал, Купертино, виджеты, рендеринг, анимацию, рисование, жесты, Foundation и т.д.
Engine: содержит протокол обслуживания, композицию, каналы платформы, настройку изоляции Dart, рендеринг, системные события, управление временем выполнения Dart, планирование кадров, разрешение активов, конвейеризацию кадров, компоновку текста и т.д.
Embedder: содержит настройку поверхности рендеринга, нативные плагины, упаковку приложений, настройку потоков, взаимодействие с контуром событий и т.д.

Преимущества Flutter

К ключевым преимуществам использования Flutter относятся:

Он предлагает непревзойденный пользовательский опыт. Все пользовательские интерфейсы, созданные во Flutter, функциональны, привлекательны и хорошо проработаны.

Высокая масштабируемость. Разработчики могут быстро добавлять или удалять функции в приложениях Flutter. Кроме того, обновление базы данных в режиме реального времени позволяет разработчикам сократить время простоя.

Простота в изучении и использовании. Flutter — это простой язык разработки приложений. Кроме того, Flutter имеет отличную документацию, а различные платформы используют Flutter для создания приложений.

Быстрая разработка приложений. Разработка кроссплатформенных мобильных приложений происходит быстро и просто благодаря различным функциям. Следовательно, легко создавать приложения для iOS и Android.

Что такое шестнадцатеричные цветовые строки во Flutter?

Шестнадцатеричные цветовые строки — это способ описания цветов. Формат этих строк — #RRGGBB, где RR означает красный цвет, GG — зеленый, а BB — синий. Каждая пара цветов в шестнадцатеричном коде имеет диапазон от 00 до FF, где 00 означает отсутствие цвета, а FF — полную интенсивность.

Проблема с шестнадцатеричным цветовым кодом во Flutter заключается в том, что его невозможно использовать напрямую. Это связано с тем, что класс цветов во Flutter принимает в качестве параметров только целые числа. Следовательно, необходимо преобразовать шестнадцатеричный код в целочисленный формат, который класс цвета может понять. Давайте перейдем к рассмотрению различных шагов по использованию шестнадцатеричных цветовых строк во Flutter.

Способы использования шестнадцатеричных цветовых строк во Flutter

Разработчики могут воспользоваться любым из трех способов использования шестнадцатеричных цветовых строк во Flutter. Эти два способа следующие:

1. Без использования расширения:
Начните с удаления знака «#».
Добавьте «0xFF» в начало кода цвета.
Поместите его в класс цвета, например, «Color( 0xFF112233)».
«backgroundColor: Color(0xFF112233)».

2. Без использования расширения:
Использование файла расширения во Flutter упрощает использование шестнадцатеричных цветовых строк. Простые шаги для этого следующие:

Начните с создания нового файла «extension.dart» в папке library и добавьте код, в котором «#» заменяется на «ff». Строка цвета преобразуется в целочисленное значение.
Используйте расширение и добавьте .toColor() в конце шестнадцатеричного цвета, например, «#ac1291».toColor().

Изменить непрозрачность цвета в кодах Flutter очень просто. Все, что вам нужно сделать, это выбрать значения «FF или ff» в соответствии с требуемой непрозрачностью.

3. Использование файла main.dart:
Легко использовать класс color в Flutter для передачи в него шестнадцатеричного цвета. Быстрые шаги для этого следующие:

Импортирование пакета material.dart в файл main.dart приложения.
Начиная с импорта пакета material.dart, легко импортировать material.dart в файл main.dart или любой другой файл, где вам нужно использовать шестнадцатеричный код цвета. Это выглядит следующим образом.

import”package:flutter/material.dart”;

Вызов MyApp в функции run-app
Следующий шаг — вызов главного класса MyApp с помощью функции runApp(). Это выглядит так: void main() 🡺 runApp(MyApp());

Создание главного класса с именем MyApp
Важно создать основной класс с именем MyApp. Он выглядит так: class MyApp extends StatelessWidget { }

Использование шестнадцатеричного цвета для нашего виджета FloatingActionButton
Исходный код файла color_coding.dart

import 'package:codereview/extension.dart';
import 'package:flutter/material.dart';

class ColorCoding extends StatelessWidget {
  const ColorCoding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(' hexadecimal color'),
      ),
      body: const Center(child: Text("Welcome,Hello Flutter Developers..!")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: "button",
        child: const Icon(Icons.star),
        backgroundColor:'#ac1291'.toColor(),
      ),
    );
  }
}
Source code for extension.dart file:

import 'package:flutter/material.dart';

extension ColorExtension on String {
  toColor() {
    var hexStringColor = this;
    final buffer = StringBuffer();

    if (hexStringColor.length == 6 || hexStringColor.length == 7) {
      buffer.write('ff');
      buffer.write(hexStringColor.replaceFirst("#", ""));
      return Color(int.parse(buffer.toString(), radix: 16));
    }
  }
}

Вывод:

Преимущества использования шестнадцатеричных цветовых строк во Flutter
К основным преимуществам использования шестнадцатеричных цветовых строк во Flutter относятся:

Использование шестнадцатеричных цветовых строк во Flutter устраняет необходимость в двоичных кодах и, следовательно, предлагает удобное для человека представление значений.

Нет никакой разницы между цветами RGB и HEX, так как оба являются различными способами передачи значений синего, зеленого или красного цвета.

Недостатки использования шестнадцатеричных цветовых строк во Flutter
Некоторые из проблемных моментов при использовании шестнадцатеричных цветовых строк во Flutter включают в себя:

При создании «цвета» из шестнадцатеричной строки, цветовая строка не остается «const».

Присвоение цветов в соответствии с инстанцирующими цветами эффективно для улучшения стандартов проекта.

Подведение итогов:

Таким образом, использовать шестнадцатеричные цветовые строки во Flutter очень просто. Хотя у него есть свои преимущества и недостатки, любому разработчику легко разобраться в исходных кодах. Начиная с определения строки шестнадцатеричного цветового кода, процесса ее использования и изменения непрозрачности, во Flutter легко создавать удивительные проекты.