I am trying to insert a list in a row format into an initial page of an app but the UI of it shows too much spacing between. I actually got the UI off a youtube tutorial and was trying to implement its elements. How can I adjust my code accordingly to reduce the spacing as shown below?

Code:

class Firstpage extends StatefulWidget {
  @override
  _FirstpageState createState() => _FirstpageState();
}

class _FirstpageState extends State<Firstpage> {
  int currentPage = 0;

  List<Map<String, String>> splashData = [
    {
      "text": "Welcome to Tokoto, Let’s shop!",
    },
    {
      "text":
      "We help people conect with store \naround United State of America",
    },
    {
      "text": "We show the easy way to shop. \nJust stay at home with us",
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 80),
                Container(
                  width: 340,
                  height: 250,
                  child:
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill),
                ),
                Center(
                  child: Text("App", style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
                SizedBox(height: 10),
                Expanded(
                  child: PageView.builder(
                    onPageChanged: (value) {
                      setState(() {
                        currentPage = value;
                      });
                    },
                    itemCount: splashData.length,
                    itemBuilder: (context, index) => intro(
                      text: splashData[index]['text'],
                    ),
                  ),
                ),
                Expanded(
                  child: Column(
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: List.generate(
                            splashData.length,
                                (index) => buildDot(index: index),
                          ),
                        ),
                      ]
                  )
                ),
                DefaultButton(
                  text: "Sign Up",
                  press: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
                  },
                ),
                SizedBox(height: 20),
                DefaultButton(
                  text: "Login",
                  press: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
                  },
                ),
              ],
            )
        )
    );
  }

  AnimatedContainer buildDot({int? index}) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 200),
      margin: EdgeInsets.only(right: 5),
      height: 6,
      width: currentPage == index ? 20 : 6,
      decoration: BoxDecoration(
        color: currentPage == index ? Color(0xFFeb1f48) : Color(0xFFD8D8D8),
        borderRadius: BorderRadius.circular(3),
      ),
    );
  }
}

And just for reference, Class Intro is:

class intro extends StatelessWidget {
  const intro({
    Key? key,
    this.text,
    this.image,
  }) : super(key: key);
  final String? text, image;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          text!,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

CodePudding user response：

If your not using SingleChildScrollView and direct to Column used try Spacer() to have balance on the spacing or put flex to adjust the spacing between.

Spacer()

or

Spacer(flex: 1),

sample

Column(
      children:[
              Spacer(),
         Container(
                  width: 340,
                  height: 250,
                  child:
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill),
                ),
                Center(
                  child: Text("App", style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
         Spacer(),
]),

CodePudding user response：

you can reduce your spacing by adjusting your SizedBox() if you notice there's SizedBox() without a child on your code, that's cause you have so much space on your screen.

and just FYI, you can use Spacer() or Expanded() to make empty spaces more flexible or dynamic toward the user's screen but keep in mind that you can't use Spacer() or Expanded() if:

1. you have parents of scrollable with the same direction of the main axis of the corresponding Column or Row (for example you have SingleChildScrollView(child: Column(...)) then you cannot use Expanded on Column. Because the widget will have infinity main axis size, which will cause infinity divided by flex amount) TLDR: you can't use Expanded & Spacer on infinity main axis size
2. when using the Column / Row be careful with "maximum main axis size" (actually, Row and Column don't pass maximum main size to their children, that's why you will have OverFlow exception when trying to write very long long Text inside a Row without using SizedBox or Expanded or Container, etc.)