Flutter get api List Card

 




import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
  runApp(MaterialApp(
    title: "apiget",
    home:MyHome()
  ));
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
 List<dynamic> _apilist=[];
  bool _loading = true;
  Future apiCall() async{
     setState(() {
      _loading = true;
    });

var res = await http.get(Uri.https("dummyjson.com", "users"));
    if (res.statusCode == 200) {
      var jsonData = jsonDecode(res.body);
      if (jsonData['users'].isNotEmpty) {
        setState(() {
          _apilist = jsonData['users'];
          _loading = false;
        });
      }
    } else {
    throw Exception('Failed to load album');
  }
  print(_apilist);
  }
  @override
  void initState() {
    // TODO: implement initState
    apiCall();
    super.initState();
  }
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("apiData"),
      ),
      body:_apilist.isNotEmpty ?ListView.builder(
              itemCount: _apilist.length,
              itemBuilder: ((context, index) {
                return Card(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 15.0,
                    vertical: 10.0,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Image.network(_apilist[index]['image'], width: 100,
                                        height: 100,
                                        fit:BoxFit.fill ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(_apilist[index]['firstName']),
                            Text(_apilist[index]['email']),
                            Text(_apilist[index]['phone']),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              }),
            )
       :Center(
        child: CircularProgressIndicator(),
       )
    );
  }
}

Second [] based api use in flutter


import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
  runApp(MaterialApp(
    title: "apiget",
    home:MyHome()
  ));
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
 List<dynamic> _apilist=[];
  bool _loading = true;
  Future apiCall() async{
     setState(() {
      _loading = true;
    });

var res = await http.get(Uri.https("melivecode.com", "api/users"));
    if (res.statusCode == 200) {
      var jsonData = jsonDecode(res.body);
      if (jsonData.isNotEmpty) {
        setState(() {
          _apilist = jsonData;
          _loading = false;
        });
      }
    } else {
    throw Exception('Failed to load album');
  }
  print(_apilist[0]);
  }
  @override
  void initState() {
    // TODO: implement initState
    apiCall();
    super.initState();
  }
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("apiData"),
      ),
      body:_apilist.isNotEmpty ?ListView.builder(
              itemCount: _apilist.length,
              itemBuilder: ((context, index) {
                return Card(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 15.0,
                    vertical: 10.0,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Image.network(_apilist[index]['avatar'], width: 100,
                                        height: 100,
                                        fit:BoxFit.fill ),
                                        SizedBox(width: 5.0,),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(_apilist[index]['fname']),
                            Text(_apilist[index]['lname']),
                            // Text(_apilist[index]['email']),
                          ],
                        )
                      ],
                    ),
                  ),
                );
              }),
            )
       :Center(
        child: CircularProgressIndicator(),
       )
     
    );
  }
}



grids api call

import 'dart:convert';
import 'package:apiget/ProfileUI2.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(MaterialApp(
title: "apiget",
home:MyHome()
));
}

class MyHome extends StatefulWidget {
const MyHome({super.key});

@override
State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
List<dynamic> _apilist=[];
bool _loading = true;
Future apiCall() async{
setState(() {
_loading = true;
});

var res = await http.get(Uri.https("melivecode.com", "api/users"));
if (res.statusCode == 200) {
var jsonData = jsonDecode(res.body);
if (jsonData.isNotEmpty) {
setState(() {
_apilist = jsonData;
_loading = false;
});
}
} else {
throw Exception('Failed to load album');
}
print(_apilist[0]);
}
@override
void initState() {
// TODO: implement initState
apiCall();
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("apiData"),
),
body:_apilist.isNotEmpty ?GridView.count(
crossAxisCount: 2,

children: List.generate(_apilist.length, (index) {
return Center(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PorfileUI2()),
);
},
child:

Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
elevation: 4,
color: Colors.white,
shadowColor: Colors.grey,
child: Padding(
padding: EdgeInsets.all(4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image.network(_apilist[index]['avatar'], width: 100,
height: 100,
fit:BoxFit.fill ),
),
// Text(
// " Ankush",
// style: TextStyle(fontWeight: FontWeight.bold),

Center(
child: Text(_apilist[index]['fname']+" "+_apilist[index]['lname'],style: TextStyle(
fontSize: 15.0,
color: Colors.blue,
fontWeight: FontWeight.w700),


) ,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.star,
color: Colors.amber[800],
),
Icon(
Icons.star,
color: Colors.amber[800],
),
Icon(
Icons.star,
color: Colors.amber[800],
),
Icon(
Icons.star_border_sharp,
color: Colors.amber[800],
),
Icon(
Icons.star_border_sharp,
color: Colors.amber[800],
),
],
)
],
)))),

);
}),
)
:Center(
child: CircularProgressIndicator(),
)

);
}
}



POST  Api



import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:login/Welcome.dart';
Future _login(BuildContext context,String email,String password) async {
  final response = await http.post(
    Uri.parse('https://sdhusain92.herokuapp.com/api/login'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
      },
    body: jsonEncode(<String, String>{
  "email": email,
  "password":password
    }),
  );

  print(response.body);
}
void main() {
  runApp(MaterialApp(
    title: "Kunal",
    home:MyHome()
  ));
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  final emailController = TextEditingController();
  final passwordController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
   
      body: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          // image: DecorationImage(image: NetworkImage("https://wallpapercave.com/wp/wp6657079.jpg"),fit:BoxFit.cover,filterQuality: FilterQuality.high)
        ),
        child: Column(children: [
        SizedBox(height: MediaQuery.of(context).size.height * 1/8),
       Center(
        child:  Text("Login",style:TextStyle(
          fontSize: 50,
          color: Color.fromARGB(255, 5, 77, 124)
        )),
       ),
           Container(
     
    child: TextField(
    controller: emailController,
   decoration: InputDecoration(
     
      hintText: "Enter your email",
      label: Text("Email"),
       enabledBorder: OutlineInputBorder(
       borderSide: BorderSide(
          width: 2, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
     focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 2, color: Colors.amberAccent),
      ),
   
     ),
    ),
     ),
   SizedBox(height: MediaQuery.of(context).size.height * 1/20),
         Container(
     
    child: TextField(
    controller: passwordController,
   obscureText: true,
     decoration: InputDecoration(
     
      hintText: "Enter your Password",
      label: Text("Password"),
       enabledBorder: OutlineInputBorder(
       borderSide: BorderSide(
          width: 2, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
     focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 2, color: Colors.amberAccent),
      ),
   
     ),
    ),
     ),
      SizedBox(height: MediaQuery.of(context).size.height * 1/20),
      SizedBox(
        height: 50,
        child: OutlinedButton(
       
        onPressed:(){
        _login(context,emailController.text,passwordController.text);
      } , child: Text("Login")) ,
      )
      ]),
      ),
    );
  }
// Future _login(String email,String password) async {
//   final response = await http.post(
//     Uri.parse('https://sdhusain92.herokuapp.com/api/login'),
//     headers: <String, String>{
//       'Content-Type': 'application/json; charset=UTF-8',
//       },
//     body: jsonEncode(<String, String>{
//   "email": email,
//   "password": password
//     }),
//   );

//   print(response.body);
// }
}




Future _login(BuildContext context,String username) async {
  // final response = await http.get(
  //   Uri.parse('https://www.melivecode.com/api/users?search=${username}'));

  // print(response.body);
  // print(username);
final response = await http.post(
Uri.parse('https://www.melivecode.com/api/users/create'),
   headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
      },
    body: jsonEncode(<String, String>{
    "fname": "${username}",
  "lname": "Chatuth",
  "username": "catut.chatth@melivecode.com",
  "password": "1234uth",
  "email": "cat.chatut@melivecode.cohm",
  "avatar": "https://www.melivecode.com/users/catuth.png"
    }),

);

print(response.body);





}


Register Code




iimport 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
 

Future _login(BuildContext context,String fname,String lname,String username,String password,String email,String avatar) async {
final response = await http.post(
Uri.parse('https://www.melivecode.com/api/users/create'),
   headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
      },
    body: jsonEncode(<String, String>{
    "fname": fname,
  "lname": lname,
  "username": username,
  "password": password,
  "email": email,
  "avatar": avatar
    }),

);

print("@@@@@@@@");





}
void main() {
  runApp(MaterialApp(
    title: "test App",
    home: MyUser(),
  ));
}

class MyUser extends StatefulWidget {
  const MyUser({super.key});

  @override
  State<MyUser> createState() => _MyUserState();
}

class _MyUserState extends State<MyUser> {
final fname = TextEditingController();
final lname = TextEditingController();
final username = TextEditingController();
final password = TextEditingController();
final email = TextEditingController();
final avatar = TextEditingController();
  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      body:Padding(padding: EdgeInsets.all(40),
      child:  Column(
     
        children: [

          SizedBox(height: 40,),
          Text("Register UI USER"),
          TextField(
            controller: fname,
            decoration: InputDecoration(
              label: Text("Fist Name"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          SizedBox(height: 20,),
           TextField(
            controller: lname,
            decoration: InputDecoration(
              label: Text("Last Name"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          SizedBox(height: 20,),
           TextField(
            controller: username,
            decoration: InputDecoration(
              label: Text("Username"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          SizedBox(height: 20,),
           TextField(
            controller: password,
            decoration: InputDecoration(
              label: Text("Password"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          SizedBox(height: 20,),
           TextField(
            controller: email,
            decoration: InputDecoration(
              label: Text("Email"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          SizedBox(height: 20,),
           TextField(
            controller: avatar,
            decoration: InputDecoration(
              label: Text("IMAG url"),
              enabledBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    ),
focusedBorder:OutlineInputBorder(
              borderRadius: BorderRadius.circular(40),
      borderSide: BorderSide(
          width: 1, color: Color.fromARGB(255, 0, 0, 0)), //<-- SEE HERE
    )


            ),

          ),
          ElevatedButton(onPressed: (){
         _login(context,fname.text,lname.text,username.text,password.text,email.text,avatar.text);
          }, child:Text("find"))
        ],
      ),
      )
    );
  }
}

Comments