Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
256 views
in Technique[技术] by (71.8m points)

In Flutter, how to place a ListView at the bottom of the screen

I'm new to Flutter. How to keep a ListView at the bottom of the screen in Flutter ? I try to put 2 widgets inside a column and put Expanded around the first widget(Text) so it should takes up the remaining screen and the ListView at bottom. But nothing shows up. If I replace the ListView with a Text widget, it works. Not sure what will take to keep the ListView at the bottom.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: <Widget>[
            Expanded(
              child: Text('Here I'm taking all the space.'),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: MyWidget(),
              //child: Text("if use Text widget, it works"),
            ),
          ]),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(scrollDirection: Axis.horizontal, children: _getListIcon());
  }

  _getListIcon() {
    List<Widget> widgets = [];
    for (int i = 0; i < 10; i++) {
      widgets.add(RaisedButton(
          onPressed: () => {},
          color: Colors.orange,
          padding: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[Icon(Icons.add), Text("Add")],
          )));
    }
    return widgets;
  }
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

instead of using the Alignment widget try changing the alignment on the axis of the column like this:

Column(
   mainAxisAlignment: MainAxisAlignment.end
   children: <Widget>[
      Expanded(
         child: Text('Here I'm taking all the space.'),
      ),
      YourListView(),
    ],
),

this works for the cross axis as well. For reference you might want to take a look at the flutter docs for the Column and the MainAxisAlignment

I hope this solves your problem.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...