Code examples (page 5)

This page is for code sharing…

Simple layout #021

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  @override
  void initState() {
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 20));
    animationController.addListener(() {
      setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    animationController.forward();
    // Using liquid_progress_indicator: ^0.3.2 from
    // https://pub.dev/packages/liquid_progress_indicator
    return SingleChildScrollView(
      child: Center(
        child: Container(
          height: size.height - 10,
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [Colors.black, Colors.white]),
          ),
          child: Column(
            children: [
              SizedBox(
                height: 10,
              ),
              Text(
                'Please wait while I am loading...',
                style: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                    fontSize: 28),
              ),
              Container(
                width: size.width - 30,
                height: 90,
                child: LiquidCircularProgressIndicator(
                  value: animationController.value,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                  backgroundColor: Colors.yellow,
                  borderColor: Colors.white,
                  borderWidth: 5.0,
                  direction: Axis.vertical,
                  center: animationController.value == 1
                      ? Text("Loaded")
                      : Text("Loading... ${animationController.value * 100}"),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Text(
                'Please wait while I am loading...',
                style: TextStyle(
                    color: Colors.yellow,
                    fontWeight: FontWeight.bold,
                    fontSize: 28),
              ),
              Container(
                width: size.width - 30,
                height: 80,
                child: LiquidLinearProgressIndicator(
                  value: animationController.value,
                  valueColor: AlwaysStoppedAnimation(Colors.white),
                  backgroundColor: Colors.green,
                  borderColor: Colors.blue,
                  borderWidth: 5.0,
                  borderRadius: 12.0,
                  direction: Axis.horizontal,
                  center: animationController.value == 1
                      ? Text("Loaded")
                      : Text("Loading... ${animationController.value * 100}"),
                ),
              ),
              SizedBox(height: 10),
              Text(
                'Please wait while I am loading...',
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 28),
              ),
              Container(
                height: 50,
                width: size.width - 30,
                child: LinearProgressIndicator(
                  value: animationController.value,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                  backgroundColor: Colors.yellow,
                  semanticsLabel: '${animationController.value * 100}',
                  semanticsValue: '${animationController.value * 100}',
                ),
              ),
              SizedBox(height: 10),
              Text(
                'Please wait while I am loading...',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 28),
              ),
              Container(
                height: 50,
                width: 300,
                child: CircularProgressIndicator(
                  value: animationController.value,
                  valueColor: AlwaysStoppedAnimation(Colors.blue),
                  backgroundColor: Colors.yellow,
                  semanticsLabel: '${animationController.value * 100}',
                  semanticsValue: '${animationController.value * 100}',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here is the result:


Simple layout #022

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

//Class generated on Flutter Shaper Maker site
//https://fluttershapemaker.com/
class RPSCustomPainterA extends CustomPainter {
  final double strokeWidthValue = 3;
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_0 = Path();
    path_0.moveTo(size.width * 0.65, size.height * 0.45);
    path_0.lineTo(size.width * 0.65, size.height * 0.53);
    path_0.lineTo(size.width * 0.63, size.height * 0.57);
    path_0.lineTo(size.width * 0.63, size.height * 0.60);
    path_0.lineTo(size.width * 0.63, size.height * 0.65);
    path_0.lineTo(size.width * 0.63, size.height * 0.68);
    path_0.lineTo(size.width * 0.65, size.height * 0.68);
    path_0.lineTo(size.width * 0.68, size.height * 0.68);
    path_0.lineTo(size.width * 0.68, size.height * 0.70);
    path_0.lineTo(size.width * 0.70, size.height * 0.72);
    path_0.lineTo(size.width * 0.70, size.height * 0.75);
    path_0.lineTo(size.width * 0.72, size.height * 0.75);
    path_0.lineTo(size.width * 0.78, size.height * 0.78);
    path_0.lineTo(size.width * 0.82, size.height * 0.80);
    path_0.lineTo(size.width * 0.85, size.height * 0.80);
    path_0.lineTo(size.width * 0.90, size.height * 0.82);
    path_0.lineTo(size.width * 0.93, size.height * 0.85);
    path_0.lineTo(size.width * 0.97, size.height * 0.85);
    path_0.lineTo(size.width * 0.97, size.height * 0.88);
    path_0.lineTo(size.width, size.height * 0.90);
    path_0.lineTo(size.width, size.height * 0.95);
    path_0.lineTo(size.width, size.height);
    path_0.lineTo(0, size.height);
    path_0.lineTo(0, size.height * 0.82);
    path_0.lineTo(0, size.height * 0.72);
    path_0.lineTo(0, size.height * 0.70);
    path_0.lineTo(size.width * 0.05, size.height * 0.70);
    path_0.lineTo(size.width * 0.10, size.height * 0.70);
    path_0.lineTo(size.width * 0.17, size.height * 0.70);
    path_0.lineTo(size.width * 0.23, size.height * 0.72);
    path_0.lineTo(size.width * 0.25, size.height * 0.68);
    path_0.lineTo(size.width * 0.30, size.height * 0.68);
    path_0.lineTo(size.width * 0.33, size.height * 0.68);
    path_0.lineTo(size.width * 0.35, size.height * 0.70);
    path_0.lineTo(size.width * 0.38, size.height * 0.72);
    path_0.lineTo(size.width * 0.42, size.height * 0.75);
    path_0.lineTo(size.width * 0.50, size.height * 0.75);
    path_0.lineTo(size.width * 0.55, size.height * 0.75);
    path_0.lineTo(size.width * 0.60, size.height * 0.75);
    path_0.lineTo(size.width * 0.65, size.height * 0.75);
    path_0.lineTo(size.width * 0.65, size.height * 0.72);
    path_0.lineTo(size.width * 0.63, size.height * 0.70);
    path_0.lineTo(size.width * 0.63, size.height * 0.68);
    path_0.lineTo(size.width * 0.60, size.height * 0.63);
    path_0.lineTo(size.width * 0.60, size.height * 0.65);
    path_0.lineTo(size.width * 0.57, size.height * 0.70);
    path_0.lineTo(size.width * 0.50, size.height * 0.72);
    path_0.lineTo(size.width * 0.45, size.height * 0.72);
    path_0.lineTo(size.width * 0.40, size.height * 0.70);
    path_0.lineTo(size.width * 0.38, size.height * 0.70);
    path_0.lineTo(size.width * 0.35, size.height * 0.68);
    path_0.lineTo(size.width * 0.35, size.height * 0.65);
    path_0.lineTo(size.width * 0.33, size.height * 0.60);
    path_0.lineTo(size.width * 0.33, size.height * 0.57);
    path_0.lineTo(size.width * 0.30, size.height * 0.57);
    path_0.lineTo(size.width * 0.30, size.height * 0.55);
    path_0.lineTo(size.width * 0.25, size.height * 0.55);
    path_0.lineTo(size.width * 0.25, size.height * 0.50);
    path_0.lineTo(size.width * 0.23, size.height * 0.47);
    path_0.lineTo(size.width * 0.20, size.height * 0.45);
    path_0.lineTo(size.width * 0.20, size.height * 0.42);
    path_0.lineTo(size.width * 0.20, size.height * 0.40);
    path_0.lineTo(size.width * 0.20, size.height * 0.40);
    path_0.lineTo(size.width * 0.20, size.height * 0.35);
    path_0.lineTo(size.width * 0.17, size.height * 0.33);
    path_0.lineTo(size.width * 0.20, size.height * 0.28);
    path_0.lineTo(size.width * 0.20, size.height * 0.25);
    path_0.lineTo(size.width * 0.20, size.height * 0.23);
    path_0.lineTo(size.width * 0.23, size.height * 0.23);
    path_0.lineTo(size.width * 0.23, size.height * 0.20);
    path_0.lineTo(size.width * 0.25, size.height * 0.17);
    path_0.lineTo(size.width * 0.28, size.height * 0.15);
    path_0.lineTo(size.width * 0.30, size.height * 0.13);
    path_0.lineTo(size.width * 0.35, size.height * 0.13);
    path_0.lineTo(size.width * 0.38, size.height * 0.13);
    path_0.lineTo(size.width * 0.42, size.height * 0.13);
    path_0.lineTo(size.width * 0.47, size.height * 0.13);
    path_0.lineTo(size.width * 0.50, size.height * 0.13);
    path_0.lineTo(size.width * 0.55, size.height * 0.15);
    path_0.lineTo(size.width * 0.57, size.height * 0.15);
    path_0.lineTo(size.width * 0.60, size.height * 0.20);
    path_0.lineTo(size.width * 0.63, size.height * 0.28);
    path_0.lineTo(size.width * 0.63, size.height * 0.30);
    path_0.lineTo(size.width * 0.65, size.height * 0.33);
    path_0.lineTo(size.width * 0.65, size.height * 0.38);
    path_0.lineTo(size.width * 0.65, size.height * 0.40);
    path_0.lineTo(size.width * 0.65, size.height * 0.42);
    path_0.lineTo(size.width * 0.65, size.height * 0.38);
    path_0.lineTo(size.width * 0.63, size.height * 0.40);
    path_0.lineTo(size.width * 0.60, size.height * 0.42);
    path_0.lineTo(size.width * 0.55, size.height * 0.42);
    path_0.lineTo(size.width * 0.53, size.height * 0.42);
    path_0.lineTo(size.width * 0.50, size.height * 0.40);
    path_0.lineTo(size.width * 0.47, size.height * 0.38);
    path_0.lineTo(size.width * 0.47, size.height * 0.35);
    path_0.lineTo(size.width * 0.45, size.height * 0.38);
    path_0.lineTo(size.width * 0.45, size.height * 0.40);
    path_0.lineTo(size.width * 0.42, size.height * 0.45);
    path_0.lineTo(size.width * 0.40, size.height * 0.45);
    path_0.lineTo(size.width * 0.38, size.height * 0.47);
    path_0.lineTo(size.width * 0.35, size.height * 0.47);
    path_0.lineTo(size.width * 0.30, size.height * 0.47);
    path_0.lineTo(size.width * 0.28, size.height * 0.45);
    path_0.lineTo(size.width * 0.28, size.height * 0.42);
    path_0.lineTo(size.width * 0.25, size.height * 0.38);
    path_0.lineTo(size.width * 0.28, size.height * 0.35);
    path_0.lineTo(size.width * 0.47, size.height * 0.30);
    path_0.lineTo(size.width * 0.50, size.height * 0.30);
    path_0.lineTo(size.width * 0.60, size.height * 0.28);
    path_0.lineTo(size.width * 0.60, size.height * 0.25);
    path_0.lineTo(size.width * 0.57, size.height * 0.20);
    path_0.lineTo(size.width * 0.53, size.height * 0.17);
    path_0.lineTo(size.width * 0.50, size.height * 0.15);
    path_0.lineTo(size.width * 0.47, size.height * 0.15);
    path_0.lineTo(size.width * 0.42, size.height * 0.17);
    path_0.lineTo(size.width * 0.35, size.height * 0.17);
    path_0.lineTo(size.width * 0.33, size.height * 0.17);
    path_0.lineTo(size.width * 0.30, size.height * 0.20);
    path_0.lineTo(size.width * 0.28, size.height * 0.25);
    path_0.lineTo(size.width * 0.25, size.height * 0.28);
    path_0.lineTo(size.width * 0.25, size.height * 0.30);
    path_0.lineTo(size.width * 0.25, size.height * 0.33);
    path_0.lineTo(size.width * 0.25, size.height * 0.35);
    path_0.lineTo(size.width * 0.25, size.height * 0.40);
    path_0.lineTo(size.width * 0.23, size.height * 0.42);
    path_0.lineTo(size.width * 0.23, size.height * 0.40);
    path_0.lineTo(size.width * 0.25, size.height * 0.42);
    path_0.lineTo(size.width * 0.25, size.height * 0.45);
    path_0.lineTo(size.width * 0.25, size.height * 0.47);

    canvas.drawPath(path_0, paint_0);

    Paint paint_1 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_1 = Path();
    path_1.moveTo(size.width * 0.42, size.height * 0.45);
    path_1.lineTo(size.width * 0.42, size.height * 0.47);
    path_1.lineTo(size.width * 0.45, size.height * 0.47);
    path_1.lineTo(size.width * 0.45, size.height * 0.45);
    path_1.lineTo(size.width * 0.47, size.height * 0.47);
    path_1.lineTo(size.width * 0.50, size.height * 0.47);
    path_1.lineTo(size.width * 0.50, size.height * 0.45);
    path_1.lineTo(size.width * 0.53, size.height * 0.47);
    path_1.lineTo(size.width * 0.53, size.height * 0.47);
    path_1.lineTo(size.width * 0.55, size.height * 0.45);

    canvas.drawPath(path_1, paint_1);

    Paint paint_2 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_2 = Path();
    path_2.moveTo(size.width * 0.42, size.height * 0.55);
    path_2.lineTo(size.width * 0.45, size.height * 0.55);
    path_2.lineTo(size.width * 0.50, size.height * 0.55);
    path_2.lineTo(size.width * 0.53, size.height * 0.55);
    path_2.lineTo(size.width * 0.55, size.height * 0.53);
    path_2.lineTo(size.width * 0.53, size.height * 0.53);
    path_2.lineTo(size.width * 0.50, size.height * 0.53);
    path_2.lineTo(size.width * 0.47, size.height * 0.53);
    path_2.lineTo(size.width * 0.45, size.height * 0.55);
    path_2.lineTo(size.width * 0.45, size.height * 0.55);

    canvas.drawPath(path_2, paint_2);

    Paint paint_3 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_3 = Path();
    path_3.moveTo(size.width * 0.03, size.height * 0.75);
    path_3.lineTo(size.width * 0.07, size.height * 0.75);
    path_3.lineTo(size.width * 0.17, size.height * 0.78);
    path_3.lineTo(size.width * 0.23, size.height * 0.75);
    path_3.lineTo(size.width * 0.25, size.height * 0.78);
    path_3.lineTo(size.width * 0.63, size.height * 0.80);
    path_3.lineTo(size.width * 0.72, size.height * 0.82);
    path_3.lineTo(size.width * 0.80, size.height * 0.85);
    path_3.lineTo(size.width * 0.85, size.height * 0.85);

    canvas.drawPath(path_3, paint_3);

    Paint paint_4 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_4 = Path();
    path_4.moveTo(0, size.height * 0.82);
    path_4.lineTo(size.width * 0.07, size.height * 0.85);
    path_4.lineTo(size.width * 0.20, size.height * 0.85);
    path_4.lineTo(size.width * 0.28, size.height * 0.85);
    path_4.lineTo(size.width * 0.40, size.height * 0.85);
    path_4.lineTo(size.width * 0.50, size.height * 0.85);
    path_4.lineTo(size.width * 0.63, size.height * 0.90);
    path_4.lineTo(size.width * 0.70, size.height * 0.90);
    path_4.lineTo(size.width * 0.88, size.height * 0.93);

    canvas.drawPath(path_4, paint_4);

    Paint paint_5 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_5 = Path();
    path_5.moveTo(size.width * 0.03, size.height * 0.97);
    path_5.lineTo(size.width * 0.10, size.height * 0.95);
    path_5.lineTo(size.width * 0.20, size.height * 0.95);
    path_5.lineTo(size.width * 0.33, size.height * 0.97);
    path_5.lineTo(size.width * 0.40, size.height);

    canvas.drawPath(path_5, paint_5);

    Paint paint_6 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthValue;

    Path path_6 = Path();
    path_6.moveTo(size.width * 0.42, size.height * 0.65);
    path_6.lineTo(size.width * 0.45, size.height * 0.68);
    path_6.lineTo(size.width * 0.50, size.height * 0.68);
    path_6.lineTo(size.width * 0.55, size.height * 0.65);
    path_6.lineTo(size.width * 0.57, size.height * 0.63);

    canvas.drawPath(path_6, paint_6);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [Colors.blue, Colors.green]),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Column(
              children: [
                Container(
                  color: Colors.green,
                  child: Image.network(
                    'https://theflutterthing.files.wordpress.com/2020/11/sergio.png',
                    width: 250,
                    height: 250,
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  color: Colors.amber,
                  child: CustomPaint(
                    size: Size(250, 250),
                    painter: RPSCustomPainterA(),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


Here is the result:


Simple layout #023

Here is the code:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
//using animated_text_kit: ^3.1.0 from
//https://pub.dev/packages/animated_text_kit
    return SingleChildScrollView(
      child: Center(
        child: Column(
          children: [
            Container(
              color: Colors.grey,
              child: TyperAnimatedTextKit(
                speed: Duration(milliseconds: 500),
                repeatForever: true,
                text: ["This is a ", "Typer animation", "Please enjoy!"],
                textStyle: TextStyle(
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black),
                pause: Duration(milliseconds: 500),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.yellow,
              child: TypewriterAnimatedTextKit(
                speed: Duration(milliseconds: 500),
                repeatForever: true,
                text: ["This is a ", "Typewriter animation", "Please enjoy!"],
                textStyle: TextStyle(
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue),
                pause: Duration(milliseconds: 500),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              child: FadeAnimatedTextKit(
                repeatForever: true,
                text: ["This is a ", "fading animation", "Please enjoy!"],
                textStyle: TextStyle(
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
                pause: Duration(milliseconds: 500),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.green,
              child: ScaleAnimatedTextKit(
                repeatForever: true,
                text: ["This is a ", "scaling animation", "Please enjoy!"],
                textStyle: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
                pause: Duration(milliseconds: 500),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.green,
              child: TextLiquidFill(
                boxBackgroundColor: Colors.brown,
                text: "This is a  liquid fill animation ",
                textStyle: TextStyle(
                    fontSize: 34.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow),
                boxHeight: 100.0,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.black,
              child: ColorizeAnimatedTextKit(
                colors: [
                  Colors.purple,
                  Colors.blue,
                  Colors.yellow,
                  Colors.red,
                ],
                repeatForever: true,
                text: ["This is a ", "scaling animation", "Please enjoy!"],
                textStyle: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
                pause: Duration(milliseconds: 500),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Here is the result:


Create your website with WordPress.com
Get started
%d bloggers like this: