Skip to content

Link's underline color should match text color #2589

Open
@SlickSlime

Description

@SlickSlime

Have you checked for an existing issue?

Flutter Quill Version

11.4.1

Steps to Reproduce

I am creating this issue (before making a pull request) to ask if everyone agrees that the default look for a link is that the color of the text matches the underline color.

Minimum reproducible code:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_quill/quill_delta.dart';
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
import 'package:sandbox_html_editor/theme.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.defaultTheme,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FlutterQuillLocalizations.delegate,
      ],
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = QuillController.basic(config: QuillControllerConfig());

  @override
  void initState() {
    super.initState();

    _controller.document = Document.fromDelta(Delta.fromJson([
      {
        "insert": "Lorem Ipsum",
        "attributes": {"link": "http://www.google.com"}
      },
      {
        "insert": "\n",
      }
    ]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Editor'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: QuillEditor.basic(
              controller: _controller,
              config: QuillEditorConfig(
                embedBuilders: FlutterQuillEmbeds.editorBuilders(),
              ),
            ),
          ),
          QuillSimpleToolbar(
            controller: _controller,
            config: const QuillSimpleToolbarConfig(
              multiRowsDisplay: false,
            ),
          ),
        ],
      ),
    );
  }
}

Expected results

Like the original quilljs Javascript package, the link's underline color should match the link's text color.

Actual results

Underline color is unset, so it DO NOT changes to secondary color, like the text.

Blame:

link: TextStyle(
color: themeData.colorScheme.secondary,
decoration: TextDecoration.underline,
),

Additional Context

Screenshots / Video demonstration

[Attach media here]

Logs
[Paste logs here]

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions