Início / coding / Perguntas / 79036180
Accepted
Geremia Moretti
Asked: 2024-09-29 18:38:37 +0800 CST

Gerenciando a cor das bordas do contêiner usando ThemeData

  • 772

Estou com dificuldade para encontrar uma solução para gerenciar a cor das bordas do meu contêiner sem codificá-las sempre.

Quero definir minhas Cores personalizadas para as Bordas no ThemeData para o modo diurno e o modo noturno, mas não consigo encontrar a propriedade certa. No momento, a cor escolhida pelo Dart para as bordas é escura.

Só para ficar claro... gostaria de escrever algo assim:

 border: Border.all(
   width: width * 0.002,
 ),

sem especificar a cor.

flutter

2 respostas

  1. Best Answer

    Se você der uma olhada no Border.allconstrutor no código-fonte , ele se parece com isto:

    Border.all({
  Color color = const Color(0xFF000000),
  double width = 1.0,
  BorderStyle style = BorderStyle.solid,
  double strokeAlign = BorderSide.strokeAlignInside,
})

    Como você pode ver, o colorparâmetro padrão é Color(0xFF000000), que é preto sólido. Isso significa que ele não herda ou faz referência a nenhuma cor do ThemeData. Infelizmente, esse parâmetro não está vinculado a propriedades de tema que podemos personalizar facilmente.

    Além disso, estender a Borderclasse para criar uma borda personalizada que use algo como Theme.of(context).colorScheme.surfacepara o colornão é uma opção, porque a Borderclasse não tem acesso ao context.

    No entanto, se você estiver procurando por uma maneira mais flexível de aplicar bordas consistentemente em todo o seu aplicativo, você pode criar uma função global. Essa função pode extrair valores de cor do tema e aplicá-los às suas bordas, assim:

    Border getCustomBorder({
  required BuildContext context,
  double width = 1.0,
}) {
  return Border.all(
    width: width,
    color: Theme.of(context).colorScheme.surface, // Pull color from the theme
  );
}

    Você pode então usar esta função em seus widgets assim:

    border: getCustomBorder(
  context: context,
  width: width * 0.002,
),
    • 0

  2. Primeiro você deve criar um arquivo dart:

    import 'package:flutter/material.dart';

enum ThemeType { dark, light }

extension AppTheme on ThemeData {
  Color get blue => brightness == Brightness.light ? const Color(0xFF016BE7) : const Color(0xFF012EE9);
}

    você pode definir cada cor que deseja no modo escuro ou claro

    e você pode usar isso

    Border.all(
    width: width,
    color: Theme.of(context).blue
  )

    quando você muda o tema (claro para escuro ou escuro para claro) as cores podem ser alteradas automaticamente.

    • 0

relate perguntas