Метка: flutter

Flutter: обновление виджета одного класса из другого класса

Flutter

Задача: в одном из фоново работающих классов (WebSocket клиент) изменилось значение отображаемое в другом классе. Необходимо вызвать setState для изменившегося виджета

Решение: воспользуемся классом StreamController. По сути это «конвеер», в который можно что-то ложить и объявлять «слушателя», который будет что-то делать если в «конвеер» попадет какое-либо значение.

Объявим в глобальных переменных контроллер, «конвеера»:

library me_flutter.globals;
var sup_controller = new StreamController<String>.broadcast();

Далее в классе ИЗ которого нужно сообщить что что-то изменилось, ложим в «конвеер» данные:

globals.sup_controller.add("new_message");

А в классе, который должен отображать изменения, объявим «слушателя» в initState:

class Support extends StatefulWidget {
  @override
  _SupportState createState() => _SupportState();
}
class _SupportState extends State<Support> {
  StreamSubscription?subscription;
  @override
  void initState() {
    super.initState();
    print("-оформляем подписку..");
      subscription = globals.sup_controller.stream.listen((index) {
        print("чтото пришло!");
        setState(() {
          _scrollDown();
        });
      });
....

Не забудем при выходе из класса, убить подписку:

  @override
  void dispose() {
    print("--отменил подписку..");
    subscription?.cancel();
    super.dispose();
  }
Оставить комментарий , , ,

Flutter: периодический таймер

Flutter

Во Flutter за таймеры отвечает класс Timer, а за периодический в частности Timer.periodic

Для примера использования, реализуем отчет переменной от 30 до 0:

import 'dart:async';
Timer?_timer; // ? говорит о том, что переменная в начале пути может быть null
int timercount=30;
bool timout_passed=false; //вышел таймаут разблокировки кнопки
...
_timer = Timer.periodic(Duration(seconds: 1), (Timer _) {
 if (timercount>0) {
    timercount = timercount - 1;
 };
 if (timercount==0) {
   timout_passed=true;
   _timer?.cancel();  // закончили отчёт
 }
});
Оставить комментарий , ,

Flutter: чтение файла из ресурсов

Flutter

Это возможно при использовании класса rootBundle. Для начала необходимо разместить файл в папку проекта. Далее в pubspec.yaml в секцию assets добавить ссылку на файл вида:

  assets:    
    - lib/files/user_agreement.txt

И далее в коде оформить загрузку файла:

import 'package:flutter/services.dart' show rootBundle;
...
class _LoginState extends State<Login> {
   String agreement_txt="";
...
   Future<void> loadAgreement() async {
     final loadAgreement = await rootBundle.loadString('lib/files/user_agreement.txt');
     setState(() {
       agreement_txt = loadAgreement;
     });
   }
...
@override
  void initState() {
     super.initState();
     loadAgreement();
  }
...
dia.SureDialog(context, "Политика конфиденциальности", agreement_txt, () {}, () {});
Оставить комментарий , , ,

Flutter: как убрать полоски при выходе за рамки контейнера виджета?

Flutter

Чаще всего такие полоски появляются при появлении экранной клавиатуры в поле ввода или при выходе элементов виджета за видимые поля, например текста. Избежать этого, можно обернув большой виджет в виджет SingleChildScrollView:

SingleChildScrollView(
  child:Container(
...
  )
)

В результате получится намного приятнее:

Оставить комментарий , ,

Flutter: рисуем форму авторизации с маской ввода

Flutter

Задача: нарисовать форму ввода телефона для авторизации, с учётом маски и проверкой корректности ввода номера. Должно получиться что-то вроде:

Решение:

Для накладывания маски на TextFormField воспользуемся пакетом flutter_multi_formatter:

                                      Text('Введите номер телефона'),
                                      Container(
                                          padding: const EdgeInsets.all(0),
                                          width: 150,
                                          child:
                                          TextFormField(
                                                keyboardType: TextInputType.phone,
                                                inputFormatters: [
                                                  PhoneInputFormatter(
                                                  )
                                                ],
                                                style: TextStyle(fontSize: 16),
                                                controller: _controllerPhone
                                            ),
                                          ),

Для того, чтобы подсвечивать кнопку разным цветом, в зависимости от введенного текста, добавим флажек phone_is_ok и два стиля оформления, на которые будет переключаться стиль кнопки в зависимости от флажка:

   final ButtonStyle raisedButtonStyleFail = ElevatedButton.styleFrom(
     onPrimary: Colors.black87,
     primary: Colors.grey[300],
     minimumSize: Size(88, 36),
     padding: EdgeInsets.symmetric(horizontal: 16),
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),
   );
   final ButtonStyle raisedButtonStyleSuccess = ElevatedButton.styleFrom(
     onPrimary: Colors.black87,
     primary: Colors.orangeAccent,
     minimumSize: Size(88, 36),
     padding: EdgeInsets.symmetric(horizontal: 16),
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),
   );

Саму кнопку нарисуем как:

                                      Container(
                                          padding: const EdgeInsets.only(top: 16),
                                          width: 150,
                                          child:
                                              ElevatedButton(
                                                style: phone_is_ok?raisedButtonStyleSuccess:raisedButtonStyleFail,
                                                onPressed: (){},
                                                child: Text('Далее', style: TextStyle(fontSize: 15)),
                                          )   ,
                                      ),

Переключение флажка будем делать, отслеживая введенный текст:

class _LoginState extends State<Login> {
   final scaffoldKey = GlobalKey<ScaffoldState>();
   final _controllerPhone = TextEditingController();
   bool phone_is_ok=false;
...
   @override
  void initState() {
     super.initState();
    _controllerPhone.text="+7";
    _controllerPhone.addListener(() {
      print(_controllerPhone.text);
      if (_controllerPhone.text.length==18){
        phone_is_ok=true;
      } else {
        phone_is_ok=false;
      };
setState(() {
     });
    });
  }

Оставить комментарий , , ,
1 2 3 4 5 … 9