How to add image and text inside a Flutter container with custom alignment?

Question

I'm trying to create a Google login-style button in Flutter. Here's the design I'm aiming for:

For now, I have this:

Current Situation: My current code renders a basic container. Here's the code:

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

  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  bool isAPIcallProcess = false;
  bool hidePassword = true;
  GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
  String? username;
  String? password;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF24004),
      body: LayoutBuilder(
        builder: (context, constraints) =>
            Stack(
              children: [
                Align(
                  alignment: const Alignment(0, -.400),
                  child: Container(
                      child: Image.asset("lib/img/pomodoro.png",
                        width: 350,
                        height: 350,) //image size
                  ),

                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      ...List.generate(
                        1,
                            (index) =>
                            Container(
                              child: Center(child:
                              Text("Continue with Google",
                              style: TextStyle(
                                fontSize: 25,
                                fontStyle: FontStyle.normal,
                               fontWeight:  FontWeight.bold,
                              ),)),
                              width: constraints.maxWidth,
                              height: constraints.maxHeight * .1,
                              color: index.isEven ?
                              Color(0xffF3F5F4):
                              Color(0xffF3F5F4),
                            ),
                      ),
                      ...List.generate(
                        1,
                            (index) =>
                            Container(
                              child: Center(child:
                              Text("Log in",
                                style: TextStyle(
                                  fontSize: 25,
                                  fontStyle: FontStyle.normal,
                                  fontWeight:  FontWeight.bold,
                                  color: Color(0xffF2F2F2)
                                ),)),
                              width: constraints.maxWidth,
                              height: constraints.maxHeight * .1,
                              color: index.isEven ?
                              Color(0xffD94530):
                              Color(0xffD94530),
                            ),
                      ),
                      ...List.generate(
                        1,
                            (index) =>
                            Container(
                              child: Center(child:
                              Text("Sign Up",
                                style: TextStyle(
                                    fontSize: 25,
                                    fontStyle: FontStyle.normal,
                                    fontWeight:  FontWeight.bold,
                                    color: Color(0xffF2F2F2)
                                ),)),
                              width: constraints.maxWidth,
                              height: constraints.maxHeight * .1,
                              color: index.isEven ?
                              Color(0xff308AD9):
                              Color(0xff308AD9),
                            ),
                      )
                    ],
                  ),
                )
              ],
            ),
      ),
    );
  }
}

Specific Question: How can I add the Google 'G' logo and text to a container and achieve the alignment shown in the design? Are there limitations to how many child elements a container can hold?

Answer 1

Hey did you try to use Row widget -

             Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.login),
                    Text("Continue with Google",
                      style: TextStyle(
                        fontSize: 25,
                        fontStyle: FontStyle.normal,
                        fontWeight:  FontWeight.bold,
                      ),
                    ),
                  ],
                ),
                width: constraints.maxWidth,
                height: constraints.maxHeight * .1,
                color: index.isEven ? Color(0xffF3F5F4): Color(0xffF3F5F4),
              ),

For more info Row