test.dart

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

class ChooseInfoButton extends StatefulWidget {
  final String title;
  final String subTitle;
  final String label;
  final String subLabel;
  final String middleText;
  final String subMiddleText;
  final Function onTap;
  ChooseInfoButton({
    @required this.label,
    @required this.middleText,
    @required this.subLabel,
    @required this.subMiddleText,
    @required this.subTitle,
    @required this.title,
    this.onTap,
    Key key,
  }) : super(key: key);

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

class _ChooseInfoButtonState extends State<ChooseInfoButton>
    with SingleTickerProviderStateMixin {
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
  }

  @override
  void dispose() {
    super.dispose();
    _focusNode.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      borderRadius: BorderRadius.circular(16),
      color: Colors.white,
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
        onTap: !_focusNode.hasFocus ? widget.onTap : null,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 16,
          ),
          child: Stack(
            children: <Widget>[
              IntrinsicHeight(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: AnimatedOpacity(
                        duration: Duration(milliseconds: 440),
                        opacity: !_focusNode.hasFocus ? 1 : 0,
                        // Focus
                        child: Row(
                          children: <Widget>[
                            SizedBox(width: 24),
                            Container(
                              height: 84,
                              width: 84,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black12,
                                    spreadRadius: 1,
                                    blurRadius: 2,
                                  )
                                ],
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(4.0),
                                child: ClipOval(
                                  child: Image.network(
                                    'https://images.genius.com/b388ad2219e4a8efaee5c39983501198.1000x1000x1.jpg',
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(width: 16),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  SizedBox(height: 12),
                                  Text(
                                    "Nothing's real",
                                    style: TextStyle(
                                      fontWeight: FontWeight.w700,
                                      fontSize: 16,
                                      color: Color.fromRGBO(61, 67, 90, 1),
                                      letterSpacing: 0.5,
                                    ),
                                  ),
                                  SizedBox(height: 8),
                                  Text(
                                    'Good',
                                    style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: 14,
                                      letterSpacing: 0.5,
                                      color: Color.fromRGBO(61, 67, 90, 1),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    InkWell(
                      borderRadius: BorderRadius.circular(21),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Image.asset(
                          'assets/icons/elipsisV.png',
                          height: 30,
                          width: 30,
                          color: Colors.black54,
                        ),
                      ),
                      onTap: () {
                        log('message');
                        setState(() {
                          if (_focusNode.hasFocus) {
                            FocusScopeNode currentFocus =
                                FocusScope.of(context);
                            if (!currentFocus.hasPrimaryFocus) {
                              currentFocus.unfocus();
                            }
                          } else {
                            FocusScopeNode currentFocus =
                                FocusScope.of(context);
                            if (!currentFocus.hasPrimaryFocus) {
                              currentFocus.unfocus();
                            }
                            FocusScope.of(context).requestFocus(_focusNode);
                          }
                        });
                      },
                    ),
                  ],
                ),
              ),
              Positioned.fill(
                child: Padding(
                  padding: const EdgeInsets.only(right: 54),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: AnimatedOpacity(
                      curve: Curves.easeInCirc,
                      duration: Duration(milliseconds: 440),
                      opacity: !_focusNode.hasFocus ? 0 : 1,
                      child: AnimatedSize(
                        duration: Duration(milliseconds: 440),
                        vsync: this,
                        curve: Curves.ease,
                        child: Container(
                          width: !_focusNode.hasFocus ? 0 : double.infinity,
                          child: Column(
                            children: <Widget>[
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  SizedBox(
                                    height: 66,
                                    width: 66,
                                    child: ClipOval(
                                      child: Material(
                                        color: Colors.red,
                                        child: InkWell(
                                          onTap: () {
                                            log('Delete');
                                          },
                                          child: Icon(
                                            Icons.restore_from_trash,
                                            color: Colors.white,
                                            size: 40,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 66,
                                    width: 66,
                                    child: ClipOval(
                                      child: Material(
                                        color: Color.fromRGBO(108, 135, 254, 1),
                                        child: InkWell(
                                          onTap: () {
                                            log('Share');
                                          },
                                          child: Icon(
                                            Icons.share,
                                            color: Colors.white,
                                            size: 36,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 66,
                                    width: 66,
                                    child: ClipOval(
                                      child: Material(
                                        color: Color.fromRGBO(60, 114, 253, 1),
                                        child: InkWell(
                                          onTap: () {
                                            log('Edit');
                                          },
                                          child: Icon(
                                            Icons.edit,
                                            color: Colors.white,
                                            size: 36,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}