Edit InkSparkle

[MaxYablochkin]

#91605

Use case

The sparkle click animation seems to have the wrong contrast(opacity, alpha). This can be seen in the following Flutter / Compose example, regardless of switching to dynamic color.

Screenrecorder-2023-07-22-22-11-31-106.mp4

Screenrecorder-2023-07-22-22-12-33-176.mp4

Sample Flutter

import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool value = false;

  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      title: Row(
        children: [
          Text('Dynamic Color'),
          Switch(
            value: value,
            onChanged: (bool value) {
              setState(() => this.value = value);
            },
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (lightDynamic, darkDynamic) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            useMaterial3: true,
            colorScheme: value == false ? null : lightDynamic,
            brightness: Brightness.light,
          ),
          darkTheme: ThemeData(
            useMaterial3: true,
            colorScheme: value == false ? null : darkDynamic,
            brightness: Brightness.dark,
          ),
          home: Scaffold(
            appBar: _buildAppBar(),
            body: CounterScreen(),
          ),
        );
      },
    );
  }
}

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    ThemeData materialTheme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
        centerTitle: true,
        backgroundColor: materialTheme.colorScheme.surfaceVariant,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'You have pushed the nutton this many times:',
            style: TextStyle(fontSize: 16),
          ),
          Text('$counter', style: materialTheme.textTheme.headlineLarge),
          SizedBox(height: 15),
          Divider(indent: 25, endIndent: 25),
          SizedBox(height: 15),
          ElevatedButton(onPressed: () {}, child: Text('Elevated Button')),
          SizedBox(height: 15),
          FilledButton(onPressed: () {}, child: Text('Filled Button')),
          SizedBox(height: 15),
          FilledButton.tonal(
              onPressed: () {}, child: Text('Filled Tonal Button')),
          SizedBox(height: 15),
          OutlinedButton(onPressed: () {}, child: Text('Outlined Button')),
          SizedBox(height: 15),
          TextButton(onPressed: () {}, child: Text('Text Button')),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => counter++),
        child: Icon(Icons.add),
      ),
    );
  }
}

Sample Compose

package com.example.composecounterapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.Button
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.Divider
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.composecounterapp.ui.theme.ComposeCounterAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val dynamicColor = remember {
                mutableStateOf(false)
            }

            ComposeCounterAppTheme(dynamicColor = dynamicColor.value) {
                CounterScreen()
                Switch(
                    checked = dynamicColor.value,
                    onCheckedChange = {
                        dynamicColor.value = !dynamicColor.value
                    },
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CounterScreen() {
    val counter = remember {
        mutableStateOf(0)
    }

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text(text = "Compose Demo Home Page") },
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.surfaceVariant
                )
            )
        },
        content = {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "You have pushed the button this many times:")
                Text(text = "${counter.value}", style = MaterialTheme.typography.headlineLarge)
                Spacer(modifier = Modifier.height(15.dp))
                Divider(modifier = Modifier.padding(horizontal = 25.dp))
                Spacer(modifier = Modifier.height(15.dp))
                ElevatedButton(onClick = { /*TODO*/ }) {
                    Text(text = "Elevated Button")
                }
                Spacer(modifier = Modifier.height(15.dp))
                Button(onClick = { /*TODO*/ }) {
                    Text(text = "Filled Button")
                }
                Spacer(modifier = Modifier.height(15.dp))
                FilledTonalButton(onClick = { /*TODO*/ }) {
                    Text(text = "Filled Tonal Button")
                }
                Spacer(modifier = Modifier.height(15.dp))
                OutlinedButton(onClick = { /*TODO*/ }) {
                    Text(text = "Outlined Button")
                }
                Spacer(modifier = Modifier.height(15.dp))
                TextButton(onClick = { /*TODO*/ }) {
                    Text(text = "Text Button")
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { counter.value++ }) {
                Icon(imageVector = Icons.Default.Add, contentDescription = "")
            }
        },
    )
}

---

Flutter

Screenrecorder-2023-07-22-22-08-12-315.mp4

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'fullscreensparkleFlutter',
      theme: ThemeData(useMaterial3: true),
      home: FullScreenSparkle(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: InkWell(
        onTap: () {},
      ),
    );
  }
}

Jetpack Compose

device-2023-07-23-223430.webm

Screenrecorder-2023-07-22-21-54-59-992.mp4

Jetpack Compose

package com.example.fullscreensparkle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.example.fullscreensparkle.ui.theme.FullScreenSparkleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FullScreenSparkleTheme(dynamicColor = false) {
                Surface(
                    modifier = Modifier
                        .fillMaxSize()
                        .clickable { },
                    color = Color.Black,
                    contentColor = Color.White
                ) {

                }
            }
        }
    }
}

---

flutter doctor -v

[✓] Flutter (Channel master, 3.13.0-9.0.pre.46, on Microsoft Windows [Version 10.0.22621.1992], locale ru-UA)
    • Flutter version 3.13.0-9.0.pre.46 on channel master at C:\Flutter-SDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c8b9b15e4c (8 hours ago), 2023-07-25 05:24:25 -0400
    • Engine revision 036c58f793
    • Dart version 3.1.0 (build 3.1.0-333.0.dev)
    • DevTools version 2.25.0

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\yablo\AppData\Local\Android\sdk
    • Platform android-TiramisuPrivacySandbox, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.5.33516.290
    • Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2022.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)

[✓] IntelliJ IDEA Community Edition (version 2023.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.2.1
    • Flutter plugin version 74.0.4
    • Dart plugin version 231.9161.14

[✓] VS Code (version 1.80.1)
    • VS Code at C:\Users\yablo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.68.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.1992]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.199
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 115.0.1901.183

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Proposal

1. Change the contrast(opacity, alpha) of the sparkle click animation.
2. Increase the duration of the sparkle animation to the nearest corresponding native.
   Proposal to Change the InkSparkle Animation #112877 ↓ :
3. Increase the size of the sequins and the distance between them.
4. When you hold the animation with your finger, the glitter and shine should dissipate, and the central circles of this animation
   should be fixed in the center, but after releasing the animation, they gradually disappear, moving towards the center.

[huycozy]

Thanks for the detailed proposal, @MaxYablochkin. But I have some questions below when compared to similar issues:

Change the contrast(opacity, alpha) of the sparkle click animation.

Could this be solved by #98669?

Increase the size of the sequins and the distance between them.

Is this similar to What if you increase the size of the sequins and the distance between them, because they are not very noticeable? which is mentioned at #112877?

[MaxYablochkin]

#98669 : Am I right, this issue is related to "When you hold the animation with your finger, the glitter and shine should dissipate, and the central circles of this animation should be fixed in the center, but after releasing the animation, they gradually disappear, moving towards the center."? If so, then maybe this partially solves the problem.

#112877 : Yes, these are currently relevant issues, which are indicated in points 3 and 4 of the current issue.

[MaxYablochkin]

Has something in common with #73163

[huycozy]

"When you hold the animation with your finger, the glitter and shine should dissipate, and the central circles of this animation should be fixed in the center, but after releasing the animation, they gradually disappear, moving towards the center."

It could be related and maybe both refer to the same issue with different wording. I would recommend you leave your comment there with details to confirm this again.

Yes, these are currently relevant issues, which are indicated in points 3 and 4 of the current issue.

Please follow up on that issue for updates to avoid duplication in different issues.

So I will close this issue in favor of those issues. Please feel free to leave comments on the relevant issues with the above information that will be helpful for later implementation. Thank you!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.