Image Picker Position Top Left

1

Hey I just want that the Profile Picture so the Image Picker is in the top left corner. It should be look like this picture does anyone know why my code not work like this. If anyone knows pls comment the solution.

Scaffold(
              body: Builder(
                builder: (context)=> Container(
                  height: 100,
                  child: ListView(
                    children: <Widget>[
                      SizedBox(height: 5.0,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children:<Widget> [
                          Align(
                            child: CircleAvatar(
                              radius: 60.0,
                              backgroundColor: Colors.white,
                              child: ClipOval(
                                child: SizedBox(
                                  width: 110.0,
                                  height: 110.0,
                                  child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
                                      :Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 100.0, right: 40),
                            child: IconButton(
                              icon: Icon(
                                Icons.camera_alt,
                                size: 30.0,
                              ),
                              onPressed: (){
                                getImage();
                              },
                            ),
                          )
                        ],
                      ),
                      RaisedButton(
                        color: Colors.white,
                        onPressed: (){
                          uploadPic(context);
                        },
                      ),
                    ],
                  ),
                ),
              ),
    ),

And this is my whole Script for the Screen!

class HomeScreen extends StatefulWidget {

  @override
  _HomeScreenState createState() => _HomeScreenState();



}

class _HomeScreenState extends State<HomeScreen> {
  File _image;
  int _currentTabIndex = 0;



  Future getImage() async{
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
      print('Image Path $_image');
    });
  }


  Future uploadPic(BuildContext context)async{
    String fileName=basename(_image.path);
    StorageReference firebaseStorageRef=FirebaseStorage.instance.ref().child(fileName);
    StorageUploadTask uploadTask=firebaseStorageRef.putFile(_image);
    StorageTaskSnapshot taskSnapshot= await uploadTask.onComplete;

    setState(() {
      print('Profile Picture uploaded');
      Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded')));
    });
   }


  @override
  Widget build(BuildContext context) {



    Future<DocumentSnapshot> getUserInfo()async{
      var firebaseUser = await FirebaseAuth.instance.currentUser;
      return await Firestore.instance.collection("SerX").doc(firebaseUser.uid).get();
    }




    final _kTabPages = <Widget>[

      Center(child: Icon(Icons.new_releases, size: 64.0, color: Colors.white)),

      Center(child: Icon(Icons.local_grocery_store, size: 64.0, color: Colors.white)),

      Center(child: Icon(Icons.chat, size: 64.0, color: Colors.white)),


      ListView(
          children: <Widget> [
            Center(
              child: FutureBuilder(
                future: getUserInfo(),
                builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    return ListView.builder(
                        shrinkWrap: true,
                        itemCount: 1,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            subtitle: Text(snapshot.data.data()["Email"], style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'Orbitron',
                              fontSize: 10.0,
                              fontWeight: FontWeight.bold,),textAlign: TextAlign.right,
                            ),
                            title: Text(snapshot.data.data()["Username"], style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Orbitron',
                                fontSize: 25.0,
                                fontWeight: FontWeight.bold),textAlign: TextAlign.right,),
                          );});
                  } else if (snapshot.connectionState == ConnectionState.none) {
                    return Text("No data");}
                  return Center(
                    child: SpinKitFadingCircle(color: Colors.white, size: 20.0),heightFactor: 29,
                  );
                },
              ),
            ),
            Scaffold(
              body: Builder(
                builder: (context)=> Container(
                  height: 100,
                  child: ListView(
                    children: <Widget>[
                      SizedBox(height: 5.0,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children:<Widget> [
                          Align(
                            child: CircleAvatar(
                              radius: 60.0,
                              backgroundColor: Colors.white,
                              child: ClipOval(
                                child: SizedBox(
                                  width: 110.0,
                                  height: 110.0,
                                  child:(_image!=null)?Image.file(_image,fit:BoxFit.fill)
                                      :Image.network("https://slcp.lk/wp-content/uploads/2020/02/no-profile-photo.png", fit: BoxFit.fill,),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.only(top: 100.0, right: 40),
                            child: IconButton(
                              icon: Icon(
                                Icons.camera_alt,
                                size: 30.0,
                              ),
                              onPressed: (){
                                getImage();
                              },
                            ),
                          )
                        ],
                      ),
                      RaisedButton(
                        color: Colors.white,
                        onPressed: (){
                          uploadPic(context);
                        },
                      ),
                    ],
                  ),
                ),
              ),
    ),
          ],
        ),




      Center(child: Icon(Icons.settings, size: 64.0, color: Colors.white)),

    ];

    final _kBottmonNavBarItems = <BottomNavigationBarItem>[


      BottomNavigationBarItem(icon:  Icon(Icons.new_releases, color: Colors.black), activeIcon: Icon(Icons.new_releases,color: Colors.grey) ,title: Text('News',  style: TextStyle(
        color: Color(0xFF000000),
        fontSize: 10.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Orbitron',
      ),),),

      BottomNavigationBarItem(icon:  Icon(Icons.local_grocery_store ,color: Colors.black),activeIcon:  Icon(Icons.local_grocery_store,color: Colors.grey), title: Text('Store',  style: TextStyle(
        color: Color(0xFF000000),
        fontSize: 10.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Orbitron',
      ),),
      ),

      BottomNavigationBarItem(icon:  Icon(Icons.chat,color: Colors.black), activeIcon:  Icon(Icons.chat,color: Colors.grey), title: Text('Chat',  style: TextStyle(
        color: Color(0xFF000000),
        fontSize: 10.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Orbitron',
      ),),),

      BottomNavigationBarItem(icon:  Icon(Icons.supervisor_account,color: Colors.black), activeIcon:  Icon(Icons.supervisor_account,color: Colors.grey), title: Text('Profile',  style: TextStyle(
        color: Color(0xFF000000),
        fontSize: 10.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Orbitron',
      ),),),

      BottomNavigationBarItem(icon:  Icon(Icons.settings,color: Colors.black), activeIcon:  Icon(Icons.settings,color: Colors.grey), title: Text('Settings',  style: TextStyle(
        color: Color(0xFF000000),
        fontSize: 10.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Orbitron',
      ),),),

    ];

    assert(_kTabPages.length == _kBottmonNavBarItems.length);

    final bottomNavBar = BottomNavigationBar(
      items: _kBottmonNavBarItems,
      fixedColor: Colors.black,
      currentIndex: _currentTabIndex,
      type: BottomNavigationBarType.fixed,
      onTap: (int index) {
        setState(() {
          _currentTabIndex = index;
        });
      },

    );



    return  Scaffold(

      appBar:  AppBar(

          bottom: PreferredSize(
              child: Container(
              color: Colors.white,
                height: 4.0,
              ),
                preferredSize: Size.fromHeight(0)),
                backgroundColor: Colors.black,
                leading:  Container(),
                title:  Text('Ser X' ,  style: TextStyle(
                  color: Color(0xFFFFFFFF),
                  fontSize: 35,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'Orbitron',
                ),),
                titleSpacing: -45,
              ),
              body: _kTabPages[_currentTabIndex],
              backgroundColor: Colors.black,
              bottomNavigationBar: bottomNavBar,

    );


  }





}





firebase
flutter
imagepicker
asked on Stack Overflow Aug 29, 2020 by serby

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0