Due to the recent trend of Flutter cross-platform technology, it is necessary to learn from it as a front-end development. Today, I will share with you a practical project case of developing simulated wechat interface chat application based on Flutter + DART + Image_picker +photo_view and other technologies.



I. Technical framework

  • Code/technique: Vscode + Flutter 1.12.13/Dart 2.7.0
  • Video component: Chewie: ^0.9.7
  • Image/Photo: image_picker: ^0.6.6+1
  • Image preview component: photo_view: ^0.9.2
  • Pop-up components: SimpleDialog/AlertDialog/SnackBar (flutter encapsulation custom)
  • Local storage: shareD_preferences: ^0.5.7+1
  • Font icon: Ali Iconfont font icon library

Dart the main entry page of Flutter

/ * * * @ TPL Flutter entry page | Q: 282310962 * / import'package:flutter/material.dart'; // Introduce a common style import'styles/common.dart'; // Import the navigation import from the bottom Tabbar page'components/tabbar.dart'; // Import address route import'router/routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: GStyle.appbarColor, ), home: TabBarPage(), onGenerateRoute: onGenerateRoute, ); }}Copy the code











































3. The top of flutter is an immersive status bar + the bottom tabbar

See this article for more details on how to implement a transparent top status bar in Flutter (remove the black translucent background of the status bar) and remove the banner in the upper right corner

Juejin. Cn/post / 684490…

4. Flutter Icon and custom IconData component

It is very simple to use Icons (icons.search) in flutter

But if you want to customize the icon, such as how to use ali icon iconfont, then you need to use IconData to customize the icon. Icon (IconData (0 xe60e fontFamily: ‘iconfont’), the size: 24.0)

To use IconData, you need to download the Ali icon library font file and then introduce the font in pubspec.yaml



Static iconfont(int codePoint, {double size = 16.0, Color Color}) {static iconfont(int codePoint, {double size = 16.0, Color Color}) {return Icon(
            IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true), size: size, color: color, ); }}Copy the code

The above code realizes the custom font icon, can customize the color, font size;

Gstyle.iconfont (0xe60e, color: Colors. Orange, size: 17.0)

5. Flutter realizes dot number/red dot reminder

Red dot alerts like the following are common in app, which can be found in wechat. Flutter does not provide such a component and can only be customized.



Class GStyle {// message red badge static badge(int count, {Color Color = Colors. Red, bool isdot =false, double height = 18.0, double width = 18.0}) {final _num = count > 99?'... ' : count;
        returnContainer( alignment: Alignment.center, height: ! isdot ? height : height/2, width: ! isdot ? Width: width/2, decoration: BoxDecoration(color: color, borderRadius: borderRadius. Circular (100.0)), child:! isdot ? Text('$_num', style: TextStyle(color: color.white, fontSize: 12.0)) : null; }}Copy the code

Call is very simple: support custom red dot size, color, default number over 99… Display; GStyle. Badge (0, isdot:true) GStyle. Badge (13) GStyle. Badge (168, color: Colors.

Implement a custom popover mode in Flutter

  • Long press is implemented in Flutter and a menu pops up in the long press position



Get the long-pressed coordinate point via the onTapDown event provided by the InkWell component

InkWell(
    splashColor: Colors.grey[200],
    child: Container(...),
    onTapDown: (TapDownDetails details) {
        _globalPositionX = details.globalPosition.dx;
        _globalPositionY = details.globalPosition.dy;
    },
    onLongPress: () {
        _showPopupMenu(context);
    },
),Copy the code

// Long press the popover double _globalPositionX = 0.0; // Double _globalPositionY = 0.0; Void _showPopupMenu(BuildContext context) {bool isLeft = _globalPositionX > MediaQuery.of(context).size.width/2 ?false : true; Bool isTop = _globalPositionY > mediaQuery.of (context).size. Height /2?false : true;

    showDialog(
      context: context,
      builder: (context) {
        returnStack(children: <Widget>[jam (top: isTop? _globalPositionY: _globalpositiony-200.0, left: IsLeft? _globalPositionX: _GlobalPOSItionX-120.0, width: 120.0, Child: Material(...)],); }); }Copy the code

  • Flutter removes the AlertDialog popover size limit

The SizedBox and UnconstrainedBox components work together as follows:

void _showCardPopup(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        returnUnconstrainedBox( constrainedAxis: Axis.vertical, child: SizedBox( width: 260, child: AlertDialog( content: Container( ... ) , elevation: 0, contentPadding: EdgeInsets. Symmetric (Horizontal: 10.0, vertical: 20.0),),); }); }Copy the code

7, Flutter chat page implementation



The maxLines property provided by the TextField text box in flutter allows multiple lines/newlines of text, but with a height by default.

MaxLines: null, keyboardType: TextInputType. Multiline

Container(margin: gstyle.margin (10.0), decoration: BoxDecoration(color: Colors. White, borderRadius: BorderRadius. Circular (3.0)), Constraints: BoxConstraints(minHeight: 30.0, maxHeight: 150.0), child: TextField( maxLines: null, keyboardType: TextInputType.multiline, decoration: InputDecoration( hintStyle: TextStyle (fontSize: 14.0), isDense:true, contentPadding: EdgeInsets. All (5.0), Border: OutlineInputBorder(borderSide: BorderSide.None)), Controller: _textEditingController, focusNode: _focusNode, onChanged: (val) {setState(() { editorLastCursor = _textEditingController.selection.baseOffset; }); }, onTap: () {handleEditorTaped(); },),),Copy the code

The flutter implementation enters the chat page and the chat messages scroll to the bottom

ScrollController _msgController = new ScrollController(); . ListView(Controller: _msgController, padding: edgeinsets.all (10.0), children: renderMsgTpl(),scrollMsgBottom() {
    timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo(_msgController.position.maxScrollExtent));
}Copy the code

Okay, the example of app chat based on Flutter/Dart is introduced here. We will share more examples in the future, I hope you can enjoy them! 💪 💪