animation.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: GestureDetector(
        onTap: () {
          FocusManager.instance.primaryFocus?.unfocus();
        },
        child:const Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isFocued = false;
  late final FocusNode focusNode = FocusNode()
    ..addListener(() {
      setState(() => isFocued = focusNode.hasFocus);
    });
  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  final tec = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title:const Text('Material App Bar'),
      ),
      body:const Text('Hello'),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SizedBox(
          height: 50,
          child: Center(
            child: Material(
              borderRadius: BorderRadius.circular(20),
              elevation: 6,
              clipBehavior: Clip.antiAlias,
              child: Container(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    LimitedBox(
                      maxWidth: 150,
                      child: Stack(
                        children: [
                          Positioned.fill(
                            child: Center(
                              child: EditableText(
                                focusNode: focusNode,
                                controller: tec,
                                backgroundCursorColor:
                                    CupertinoColors.inactiveGray,
                                style: theme.textTheme.subtitle1!,
                                cursorColor:
                                    theme.textSelectionTheme.cursorColor ??
                                        theme.colorScheme.primary,
                              ),
                            ),
                          ),
                          Center(
                            child: IgnorePointer(
                              child: Text(
                                'Write something',
                                style: theme.inputDecorationTheme.labelStyle,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    AnimatedSwitcher(
                      duration: const Duration(milliseconds: 500),
                      transitionBuilder: (child, animation) => SizeTransition(
                        child: Center(child: child),
                        sizeFactor: animation,
                        axis: Axis.horizontal,
                      ),
                      child: isFocued
                          ? Row(
                              children:const [
                                Icon(Icons.calendar_today),
                                Icon(Icons.calendar_today),
                                Icon(Icons.calendar_today),
                              ],
                            )
                          : const SizedBox.shrink(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}