Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request - adjust the width of the gradient and the angle #70

Open
yuhao-nyc opened this issue Sep 20, 2023 · 1 comment
Open

Comments

@yuhao-nyc
Copy link

Screenshot 2023-09-20 at 11 54 05

Like in the screenshot. The gradient on the right is way wider than the gradient on the left (which used this shimmer package). Is there a way I can adjust how wide the gradient get?
And on top of that can I adjust the tilt angle of the gradient?

@olexale
Copy link

olexale commented Feb 3, 2024

You can achieve that by using Shimmer constructor with the gradient field. The width might be controlled by stops and the angle by setting the correct alignment (begin and end). Here is a tilted narrow example:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Column(
      children: [
        const SizedBox(
          width: 200.0,
          height: 100.0,
          child: Shimmer(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: <Color>[
                  Colors.red,
                  Colors.red,
                  Colors.yellow,
                  Colors.red,
                  Colors.red,
                ],
                stops: <double>[
                  0.0,
                  0.48,
                  0.5,
                  0.52,
                  1.0
                ]),
            child: Text(
              'Shimmer',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        SizedBox(
          width: 200.0,
          height: 100.0,
          child: Shimmer.fromColors(
            baseColor: Colors.red,
            highlightColor: Colors.yellow,
            child: const Text(
              'Shimmer',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ],
    ))));
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants