StarBorder does not lerp to Oval

@gspencergoog

The new StarBorder has a genius 2-3 step lerp for most shapes, except Circle, where it works well except when eccentricity != 0. I think it was forgotten in the implementation, as Oval is only a few weeks old. I propose adding the 2-way lerp to circle, so oval works. cc @gspencergoog

Related: in the upcoming BoderSide.only PR, which may or may not be accepted, Star -> Circle is the only lerp that doesn't work, as it draws a path all the time. The other shapes draw a path until 50%, then their shape until 100%, so lerp is good (not great, might need a few fixes). I see two potential solutions:

Add 2 step lerp for Oval (and eccentricity != 0).
Add 2 step lerp for all circles.

If you fix oval only, in a hypothetical future, we might need to do if (multiBorder) 2-step lerp for circle, which is also fine. Just telling you the plan.

Screen.Recording.2022-07-31.at.17.45.57.mov

Simple sample:

StarBorder(
    side: BorderSide(color: Colors.yellow.withOpacity(0.5), width: 10),
).lerpTo(RoundedRectangleBorder(side: BorderSide(color: Colors.red.withOpacity(0.5), width: 10), 0.5)

@bernaferrari

Hi @bernaferrari, Thanks for filing the issue. Can you please share a code sample or confirm if this code sample is right?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Material(
          child: SizedBox(
            height: 100,
            width: 100,
            child: Container(
              alignment: Alignment.center,
              decoration: ShapeDecoration(
                  color: Colors.white,
                  shape: StarBorder(
                    side: BorderSide(
                        color: Colors.yellow.withOpacity(0.5), width: 10),
                  ).lerpTo(
                      RoundedRectangleBorder(
                          side: BorderSide(
                              color: Colors.red.withOpacity(0.5), width: 10)),
                      0.5)!),
            ),
          ),
        ));
  }
}

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2009, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2009 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9d96c7b8be (8 hours ago), 2022-08-01 00:39:06 -0400
    • Engine revision cf0db3e546
    • Dart version 2.19.0 (build 2.19.0-49.0.dev)
    • DevTools version 2.16.0

@gspencergoog

I knew by the time I went to answer this, there would be a PR already. Nice work @gspencergoog! lol

Yes, seems like a great sample @maheshmnj. Thanks!

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.

Navigation Menu

Repository navigation

StarBorder does not lerp to Oval #108707

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

StarBorder does not lerp to Oval #108707

Description

Activity

maheshj01 commented on Aug 1, 2022

bernaferrari commented on Aug 1, 2022

bernaferrari commented on Aug 1, 2022

github-actions commented on Aug 16, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions