Home > Mobile >  How to align a text widget in the bottom left corner of my flutter app?
How to align a text widget in the bottom left corner of my flutter app?

Time:10-05

I am deeveloping a Quotes app as a beginner in flutter.So i was using image and text both to make those Quotes aesthetically more appealing.Right now i want to add a simple Number in the bottom left corner of my app.Its for showing the user which page they are Right now,whatever i was doing it was showing me error.Kindly help if possible.[Here p1(),p2() etc are the some of the page i created]

class OverviewScreen extends StatefulWidget {
const OverviewScreen({key, Key,}) : super(key: key);
@override
_OverviewScreenState createState() => _OverviewScreenState();
}

class _OverviewScreenState extends State<OverviewScreen> {
PageController pageController =PageController(initialPage: 0);

@override
Widget build(BuildContext context) {
return MaterialApp(
  home:Scaffold(
    drawer:NavigationDrawerWidget() ,
    extendBodyBehindAppBar: true,
    appBar: AppBar(
        title: Text("Hu   R   Rehman",
        style: TextStyle(fontFamily: "MonteCarlo"),),
        centerTitle: true,


      shape:RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(16))
      ),
      backgroundColor: Colors.transparent,
      elevation: 0,

    ),
    body:Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          PageView(
            controller:pageController,
            children: [
              Stack(
                alignment: Alignment.center,
                children: [
                  Image(image: AssetImage('Image/soc1.jpg'),
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: double.infinity,),
                  const Text(' Hello world ',
                    style: TextStyle(
                        fontSize: 34.0,
                        fontFamily: "Explora",
                        color: Colors.white,
                        fontWeight: FontWeight.w900),
                  ),
                ],
              ),
              p1(),p2(), p3(), p5(),p6(),p4(),p7(),
              p8()


            ],
            )
            ],
            ),
            )


            ),
            );
            }
             }

CodePudding user response:

Wrap The Widget in Align widget

        Stack(
              alignment: Alignment.center,
              children: [
                PageView(
                  controller:pageController,
                  children: [
                    Stack(
                      alignment: Alignment.center,
                      children: [
                        Image(image: AssetImage('Image/soc1.jpg'),
                          fit: BoxFit.cover,
                          width: 200,
                          height: 200),
                        const Text(' Hello world ',
                          style: TextStyle(
                              fontSize: 34.0,
                              fontFamily: "Explora",
                              color: Colors.black,
                              fontWeight: FontWeight.w900),
                        ),
                        Align(
                          alignment: Alignment.bottomLeft,
                          child: const Text(' Page 1 ',
                            style: TextStyle(
                                fontSize: 34.0,
                                fontFamily: "Explora",
                                color: Colors.black,
                                fontWeight: FontWeight.w900),
                          ),
                        ),
                      ],
                    ),
                  ],
                )
              ],
            ),
  • Related