Flutter 스켈레톤 와이어프레임

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Skeleton Wireframe',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late final List<User> _users;
  late final List<Post> _posts;

  bool _loading = true;

  Future<void> _loadPosts() async {
    await Future.delayed(const Duration(seconds: 3));

    setState(() {
      _loading = false;
    });
  }

  @override
  void initState() {
    _users = const [
      User(
          name: 'Dan Brown',
          photo:
              'https://upload.wikimedia.org/wikipedia/commons/5/5f/Alberto_conversi_profile_pic.jpg'),
      User(
          name: 'Leanne Graham',
          photo:
              'https://i1.wp.com/www.alphr.com/wp-content/uploads/2020/12/Facebook-How-to-Change-Profile-Picture.jpg?fit=1200%2C666&ssl=1'),
      User(
          name: 'Ervin Howell',
          photo:
              'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'),
    ];

    _posts = [
      Post(
          date: '22.03.2022',
          title: 'Lorem ipsum dolor sit amet',
          text:
              'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters,',
          user: _users[0]),
      Post(
          date: '20.03.2022',
          title: 'many web sites still in their infancy',
          text:
              'and a search for lorem ipsum will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes',
          user: _users[1]),
      Post(
          date: '17.03.2022',
          title: 'Lorem Ipsum is not simply random text',
          text:
              'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,',
          user: _users[2]),
    ];

    _loadPosts();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
            children: List.generate(_posts.length, (index) {
          return Padding(
            padding: const EdgeInsets.all(16.0),
            child: _loading
                ? const PostWireFrame()
                : PostWidget(post: _posts[index]),
          );
        })),
      ),
    );
  }
}

class PostWidget extends StatelessWidget {
  final Post post;

  const PostWidget({Key? key, required this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                ClipOval(
                  clipBehavior: Clip.hardEdge,
                  child: SizedBox(
                    width: 50,
                    height: 50,
                    child: Image.network(
                      post.user.photo,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                const SizedBox(width: 15),
                Text(post.title),
              ],
            ),
            const SizedBox(height: 10),
            Text(post.text),
            const SizedBox(height: 10),
            Align(
              alignment: Alignment.centerRight,
              child: Text(post.date),
            )
          ],
        ),
      ),
    );
  }
}

class PostWireFrame extends StatelessWidget {
  const PostWireFrame({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: const [
              WireFrame(
                width: 50,
                height: 50,
                shape: BoxShape.circle,
              ),
              SizedBox(width: 15),
              Expanded(
                child: WireFrame(
                  height: 25,
                ),
              )
            ],
          ),
          const WireFrame(
            height: 100,
          ),
          const Align(
            alignment: Alignment.centerRight,
            child: WireFrame(
              width: 50,
              height: 25,
            ),
          )
        ],
      ),
    );
  }
}

class WireFrame extends StatefulWidget {
  final double? width;
  final double? height;
  final BoxShape? shape;

  const WireFrame({Key? key, this.width, this.height, this.shape})
      : super(key: key);

  @override
  State<WireFrame> createState() => _WireFrameState();
}

class _WireFrameState extends State<WireFrame>
    with SingleTickerProviderStateMixin<WireFrame> {
  late final AnimationController _controller;
  late final Animation gradientFirstColorAnim;
  late final Animation gradientSecondColorAnim;

  final gradientFirstColorTween = TweenSequence([
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[200], end: Colors.grey[600]),
        weight: 1),
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[600], end: Colors.grey[200]),
        weight: 1),
  ]);

  final gradientSecondColorTween = TweenSequence([
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[600], end: Colors.grey[200]),
        weight: 1),
    TweenSequenceItem(
        tween: ColorTween(begin: Colors.grey[200], end: Colors.grey[600]),
        weight: 1),
  ]);

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  void initState() {
    _controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);

    gradientFirstColorAnim = gradientFirstColorTween.animate(_controller);
    gradientSecondColorAnim = gradientSecondColorTween.animate(_controller);

    _controller.repeat();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Container(
            width: widget.width,
            height: widget.height,
            decoration: BoxDecoration(
              borderRadius: widget.shape == BoxShape.circle
                  ? null
                  : BorderRadius.circular(5),
              shape: widget.shape ?? BoxShape.rectangle,
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    gradientFirstColorAnim.value,
                    gradientSecondColorAnim.value,
                  ]),
            ),
          );
        });
  }
}

class User {
  final String name;
  final String photo;

  const User({required this.name, required this.photo});
}

class Post {
  final User user;
  final String title;
  final String text;
  final String date;

  const Post(
      {required this.user,
      required this.title,
      required this.text,
      required this.date});
}