A textfield that contain animated widget. Like telegram new update has. A breakthrough in mobile engineering as Durov said ✌️

readme.md

Preview

animatable_textfield.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MainFrame(),
    );
  }
}

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

  @override
  State<MainFrame> createState() => _MainFrameState();
}

class _MainFrameState extends State<MainFrame> {

  late final TextEditingController controller;

  @override
  initState() {
    super.initState();
    controller = CustomAnimatableController();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              TextField(
                controller: controller,
              )
            ],
          ),
        ),
      ),
    );
  }
}

class CustomAnimatableController extends TextEditingController {
  @override
  TextSpan buildTextSpan(
      {required BuildContext context,
      TextStyle? style,
      required bool withComposing}) {
    return TextSpan(
      children: [
        TextSpan(
          text: value.text,
          style: style,
        ),
        const WidgetSpan(
          // the magic is here
          child: AnimatableWidget(),
        ),
      ],
    );
  }
}

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

  @override
  State<AnimatableWidget> createState() => _AnimatableWidgetState();
}

class _AnimatableWidgetState extends State<AnimatableWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<double> animation;

  @override
  void initState() {
    controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    controller.addListener(() {
      if (controller.isCompleted) {
        controller.reverse();
      }
      if (controller.isDismissed) {
        controller.forward();
      }
    });
    animation = Tween(begin: 0.0, end: 20.0).animate(controller);
    controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 20,
      width: 20,
      child: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, _) {
            return Container(
              width: animation.value,
              height: animation.value,
              color: Colors.red,
            );
          },
        ),
      ),
    );
  }
}