CODEWITHSUNDEEP
flutterdart
Yogesh Prakash
Yogesh Prakash

Reputation: 37

Add Profile icon in Flutter

Home Screen

So I'm trying to recreate a layout somewhat similar to the iOS App Store Home page. I wanted to know how to add a small profile icon next to the "Home" title as shown in the screenshot attached. I tried to use certain alignments but it doesn't seem to work. Any suggestions? Edit: I have just attached the code below for reference as well

return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomPadding: false,
        body: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.blue[900],
                Colors.blue[300],
              ],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 30),
              Padding(
                padding: EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(height: 20),
                    Text(
                      'Home',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 50,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 50),
                    Container(
                      padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(20),
                        ),
                        color: Colors.white,
                      ),
                    ),
                    SizedBox(height: 30),
                    Container(
                      padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(20),
                        ),
                        color: Colors.white,
                      ),
                    ),
                    SizedBox(height: 30),
                    Container(
                      padding: EdgeInsets.fromLTRB(80, 110, 80, 0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(20),
                        ),
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          backgroundColor: Colors.white,
          iconSize: 35,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
              backgroundColor: Colors.blue,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
              backgroundColor: Colors.blue,
            ),
          ],
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
        ),
        floatingActionButton: Container(
          height: 80,
          width: 80,
          child: FloatingActionButton(
            child: Icon(
              Icons.add,
              size: 40,
              color: Colors.black,
            ),
            backgroundColor: Colors.yellowAccent,
            onPressed: () {
              setState(() {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AddRoom()),
                );
              });
            },
          ),
        ),
      ),
    );

Upvotes: 0

Views: 20296

Answers (3)

user21213170
user21213170

Reputation: 1

Just take Icons.account_circle_rounded and u get an account icon. Like such

Upvotes: 0

Jigar Patel
Jigar Patel

Reputation: 5423

One way you should be able to do this is using a Row as the top child of the Column which will contain the title "Home" as the Text widget and a CircleAvatar for profile image, and setting the mainAxisAlignment of the row to spaceBetween like this..

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text(
          'Home',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 50,
            fontWeight: FontWeight.bold,
          ),
        ),
        CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            'https://source.unsplash.com/50x50/?portrait',
          ),
        ),
      ],
    )

Upvotes: 1

Suthura Sudharaka
Suthura Sudharaka

Reputation: 673

Wrap your Text with a Row

            Row(
                mainAxisAlignment: MainAxisAlignment.start, //change this as you need
                children: <Widget>[
                  Text(
                    'Home',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 50,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Icon(Icons.home), //change this icon as you need
                ],
              ),

Upvotes: 0

Related Questions