CODEWITHSUNDEEP
flutteruser-interfacedart
user11856923
user11856923

Reputation:

Flutter: Using Align bottom and SingleChildScrollView together?

I want to add a footer text to my app. This works just fine when I use Align() so it automatically places the text at the bottom of the screen. But When I use SingleChildScrollView() it shows an error, since the screen is not static anymore. How can I combine both to get a footer always at the bottom but keep the screen (a bit) scrollable?

Upvotes: 1

Views: 2434

Answers (3)

Abhijith
Abhijith

Reputation: 2327

you can use bottomNavigationBar for that,you can use your custom widget in bottom and with SingleChildScrollView/CustomScrollView in body you can use for scrolling or use listview

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
            ///Your Wiget
            ],
          ),
        ),
        bottomNavigationBar: TextButton(
          style: TextButton.styleFrom(
            primary: Colors.blue,
          ),
          onPressed: () {},
          child: Text('TextButton'),
        ));
  }
}

Upvotes: 1

Chirag Bargoojar
Chirag Bargoojar

Reputation: 1214

You can wrap your SingleChildScrollView() with Expanded() widget.

Here is simple example

Container(
      child: Column(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Center(
              child: Text("Header"),
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
               // Put Content which will scroll
               child: Text("Hello"),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Center(
              child: Text("Footer"),
            ),
          )
        ],
      ),
    ),

Upvotes: 2

Ardeshir ojan
Ardeshir ojan

Reputation: 2409

you can try a few things you can put that text in bottomNavigationBar or bottomSheet... or you can try align in this way

alignment: FractionalOffset.bottomCenter,

or you can use spacer() before that text. and remember that if you are using this and singleChildScrollView makes problem this will help you

CustomScrollView(
      slivers: [
        SliverFillRemaining(
          hasScrollBody: false,

just use it instead of singleChildScrollView

Upvotes: 0

Related Questions