flutterexamples

Examples for flutter apps.

Drawer

main.dart

Drawer 구성 - 헤더, 아이템

GlobalKey 로 Scaffold 제어

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();
...
RaisedButton(
  child: Text('Tap to open drawer'),
  onPressed: () => _scaffoldKey.currentState.openDrawer(),
)

Snack bar

snack_bar_page.dart

Document link : Display a snackbar

Scaffold.of(context) method
"현재 주어진 Context 에서 가장 가까운 Scaffold 를 찾아 반환해라"

Scaffold 외에 여러가지 Widget 에 적용 가능하다.

문제점
아래와 같은 상황이면 부모의 Context 를 가지고 상위 Widget 들 중에 Scaffold 를 탐색하게 되는데 내가 원하는 Scaffold 는 아래의 _SnackBarPageState 클래스 안에 존재한다.

class _SnackBarPageState extends State<SnackBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Snack Bar Test'),
          centerTitle: true,
          backgroundColor: Colors.red,
        ),
        body: Center(
          child: FlatButton(
            child: Text('Show me',
                style: TextStyle(
                  color: Colors.white,
                )),
            color: Colors.red,
            onPressed: () {
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('This is SnackBar!!'),
              ));
            },
          ),
        )
    );
  }
}

해결법 Scaffold 를 Builder 위젯의 build 함수에 넣어줌으로서 부모에서 받은 context 외에 Builder 위젯부터 시작하는 새로운 context childContext 를 만들어 사용할 수 있다.

body: Builder(builder: (BuildContext childContext) {
  return Center(
    child: FlatButton(
      child: Text('Show me',
          style: TextStyle(
            color: Colors.white,
          )),
      color: Colors.red,
      onPressed: () {
        Scaffold.of(childContext).showSnackBar(SnackBar(
          content: Text('This is SnackBar!!'),
        ));
      },
    ),
  );
}));

해결법2
커스텀 Widget 을 만들어준다. 이렇게 할 시 Widget 의 build 메소드를 오버라이드할 때 Context 를 새롭게 만드므로 위의 Builder 위젯을 사용한 것과 동일한 효과가 난다.

class MySnackBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('Show me'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text(
              'Snack Bar with custom widget!!',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
            backgroundColor: Colors.teal,
            duration: Duration(microseconds: 1000),
          ));
        },
      ),
    );
  }
}

해결법3 Flutter Toast Library 사용 링크

Navigator

Navigation folder

push, pop 메소드 push 메소드 (화면 전환)

RaisedButton(
  child: Text('Go to SecondPage'),
  color: Colors.blue,
  onPressed: () => Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage())),
),

pop 메소드

Navigator.pop(context);

AppBar 가 있을 경우 뒤로가기 버튼이 생긴다.

pushNamed 메소드 MaterialApp() 의 home 대신에 initialRoute 를 넣어주고 사용할 Route 들을 routes 에 Map 형식으로 지정해주면 사용이 가능하다. 장고의 Urls.py 와 비슷한 느낌을 준다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      
        // Navitaion - pushNamed
        initialRoute: '/',
        routes: {
          '/' : (context) => HomePage(),
          '/b' : (context) => PushNamedB(),
          '/c' : (context) => PushNamedC(),
        },
        //home: HomePage(),
      );
  }
}

  RaisedButton(
    color: Colors.green,
    child: Text('Go to PushNamedB'),
    onPressed: () {
      Navigator.pushNamed(context, '/b');
    },
  ),
  RaisedButton(
    color: Colors.green,
    child: Text('Go to PushNamedC'),
    onPressed: () {
      Navigator.pushNamed(context, '/c');
    },
  )

pushNamed Arguments 넘겨주기

Route 부분은 방법1, 방법2 동일

  Navigator.pushNamed(
    context, PassArgumentsPage.routeName,
    arguments: Arguments('title', 'message')

방법1: Extract Arguments
main.dart의 MaterialApp( routes: 내용을 수정해준다. )

routes: {
  ...
  // Navigator.pushNamed
  ExtractArgumentsPage.routeName: (context) => ExtractArgumentsPage()
},

아래 메소드를 이용하여 context에서 arguments 를 추출한다. ModalRoute.of(contex).settings.arguments

class ExtractArgumentsPage extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // context 에서 arguments 추출
    final Arguments args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

방법2: Pass Arguments main.dart의 MaterialApp( onGenerateRoute: 에 route 할 때 취할 동작을 적어준다. )

onGenerateRoute: (settings) {
/*
// settings type : RouteSettings

const RouteSettings({
  String name, // 라우터 이름
  bool isInitialRoute: false, // 초기 라우터여부
  Object arguments // 인자들
})
*/
if(settings.name == PassArgumentsPage.routeName) {
  final Arguments args = settings.arguments;

  return MaterialPageRoute(
    builder: (context) {
      return PassArgumentsPage(
        title: args.title,
        message: args.message,
      );
    }
  );
}
},

생성자로 arguments 를 받아준다.

class PassArgumentsPage extends StatelessWidget {
  static const routeName = '/passArguments';

  final String title;
  final String message;

  // 인자로 arguments 넘겨받기
  const PassArgumentsPage({
    Key key,
    @required this.title,
    @required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

Aqudi / flutter_cookbook