drifter_app/lib/pages/profile_screen/widgets/user_info_widget.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: const [
          AvatarWidget(),
          SizedBox(
            height: 10,
          ),
          UserNameWidget(),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // todo: create a slide up to choose avatar
    return CircleAvatar(
      backgroundImage: NetworkImage('https://via.placeholder.com/150'),
      // backgroundColor: AppColors.mainAccent,
      radius: 40,
    );
    // return Container(
    //   decoration: BoxDecoration(
    //       border: Border.all(color: Colors.black),
    //       borderRadius: BorderRadius.all(Radius.circular(75))),
    //   width: 150,
    //   height: 150,
    // );
  }
}

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

  @override
  State<UserNameWidget> createState() => _UserNameWidgetState();
}

class _UserNameWidgetState extends State<UserNameWidget> {
  late final TextEditingController messageController;
  late final FocusNode messageFocusNode;

  @override
  void initState() {
    messageController = TextEditingController();
    messageFocusNode = FocusNode();

    super.initState();
  }

  @override
  void dispose() {
    messageController.dispose();
    messageFocusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(
          Radius.circular(
            0.0,
          ),
        ),
        child: TextField(
          controller: messageController,
          focusNode: messageFocusNode,
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 14,
          ),
          decoration: InputDecoration(
            hintText: 'Username',
            hintStyle: const TextStyle(fontSize: 14),
          ),
        ),
      ),
    );
  }
}