Question 79018 in Flutter Question posted in
The official Flutter documentation can be found here.

Couldn't resolve the gap between? – Flutter

I have created a LinkText class of my own which has a Row of Text which has a normal text and link text for getting to another page. I already had a page of Sign up of column method, while I inserted this row class in that page, there is a huge gap in between I want to get rid of it but don’t know how?

I paste the page and that component class here:

import 'package:flutter/material.dart';
import 'package:nazkearn_app/components/fieldform.dart';
import 'package:nazkearn_app/components/link_with_text.dart';
import 'package:nazkearn_app/components/tap_button.dart';

class SignInScreen extends StatelessWidget {
  SignInScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
          children: [
            const SizedBox(
              height: 150,
            ),
            const Padding(
                padding: EdgeInsets.only(left: 20.0)),
            const Center(
              child: Text("Sign In",
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),),
            ),
            Text("Login and continue your journey",
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.normal,
                  color: Colors.grey[700]
              ),),
            const SizedBox(
              height: 20,
            ),
            const Fieldform(
                name: "Email",
                foretext: "Type your email"),
            const Fieldform(
                name: "Password",
                foretext: "Type your Password"),
            const SizedBox(
              height: 30,
            ),
            const TapButton(
                text: "Sign in"),
            // here there is an huge gap 
            const LinkText(
                  normal:"Don't have an Account",
                  link: "Sign in"),
          ]
      ),
    );
  }
}

//that class
import 'package:flutter/material.dart';

class LinkText extends StatelessWidget {
  const LinkText({Key? key,
    required this.normal,
    required this.link})
      : super(key: key);
  final String normal;
  final String link;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Don't have an Account?",
          style: TextStyle(fontSize: 16),
        ),
        GestureDetector(
          onTap: () {
          },
          child: Text("Sign up",
            style: TextStyle(fontSize: 16,
            color: Colors.red[400]),
          ),
        ),
      ],
    );
  }
}

I tried Padding and Spacer and many other things but it doesn’t move near to the sign in button. I want the text to go right below the sign in button. Please help

enter image description here

Tags:

2

Answers


  1. 0

    Try to wrap the Row inside the LinkText with a SizedBox. Like this:

    class LinkText extends StatelessWidget {
  const LinkText({Key? key,
    required this.normal,
    required this.link})
      : super(key: key);
  final String normal;
  final String link;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 20, //change this value how you like it
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Don't have an Account?",
            style: TextStyle(fontSize: 16),
          ),
          GestureDetector(
            onTap: () {
            },
            child: Text("Sign up",
              style: TextStyle(fontSize: 16,
                  color: Colors.red[400]),
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    The problem causing widget is TapButton() as you didn’t produce the TapButton() class. I will try to mimic the class using OutlinedButton

    Replace the TapButton() with following code:

    OutlinedButton(onPressed: () {}, child: Text("Sign In"));

    or

    FilledButton(onPressed: () {}, child: Text("Sign In"));

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search