Issue 99: flutter learning (2)

Continue today flutter Some related knowledge , It mainly includes the following contents .

• State component
• Send a request dio
• The screen size fits

State component

flutter State component concept and react Basically the same , The component maintains its own state , And also by calling setState Make status changes .

We use vs code You can use shortcut commands to generate state components , Then change it to the component name we need .

The sample code is as follows ：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var userInfo = '';
  // initState
  @override
  void initState(){
    getUserInfo().then((value) {
      print('user-info=====>$value');
       setState(() {
        userInfo:value;
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('T-shop'),
      ),
      body: Container(
        child: Center(
          child: Text('terrence'),
        ),
      )
    );
  }
}

HomePage In the state component , Defined userInfo Variable , When we use getUserInfo Method to obtain user information , Through setState Method to assign it , So as to achieve the purpose of modifying the state .

Send a request

and web Same end development ,flutter The development of the project also needs to use the corresponding request Library , At present, the most commonly used is dio library .

dio Is a powerful Dart Http Request Library , Support Restful API、FormData、 Interceptor 、 Request cancellation 、Cookie management 、 Upload files / download 、 Overtime 、 Custom adapter, etc ...

Its usage is also very simple , Basically write with us web The development of the end is consistent .

The simple usage is as follows ：

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    var response = await Dio().get('http://www.google.com');
    print(response);
  } catch (e) {
    print(e);
  }
}

Introduce the corresponding package , Defined function , Then send the corresponding request .

For example, we can define a method to obtain user information getUserInfo：

// service_methods.dart
//  Get user information 
Future getUserInfo() async {
  try{
     print('get-userInfo--->');
  Response response;
  Dio dio = new Dio();
  dio.options.contentType = Headers.jsonContentType;
  response = await dio.post( servicePath['homePageContent']??'', data:{} );

  if(response.statusCode == 200){
    return response.data;
  }else{
    throw Exception('service error');
  }
  }catch(e){
    return print(e);
  }
 
}

When we use , and promise The usage of is basically the same . First, import the corresponding file package , And then call the method , stay then Method to receive the return value for processing .

//  Import the corresponding package 
import '../service/service_methods.dart';

//  Call methods to process 
@override
  void initState(){
    getUserInfo().then((value) {
      print('user-info=====>$value');
      setState(() {
        userInfo:value;
      });
    });
    super.initState();
  }

Another thing to note is , The data returned by the interface may be a json character string , meanwhile dart and js Language is similar to , But it's not the same , It doesn't work . The point operator directly obtains the attributes of the object , We need to do some data format conversion , Or use it directly dart Linguistic Map The operation method of the data structure is to take values .

The screen size fits

The screen size configuration requires related dependent packages ：flutter_screenutil.

We can do it in github I found this bag on , It is also essentially a component , It's easy to use .

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    // Set dimensions （ Fill in the screen size of the equipment in the design ） If the design is based on 360dp * 690dp The screen of 
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: Size(360, 690),
        context: context,
        minTextAdapt: true,
        orientation: Orientation.portrait);
    return Scaffold();
  }
}

It has some common properties , You can see ：