'Flutter 앱' 카테고리의 글 목록 (5 Page)

Flutter 화면 이동 (Navigator)

Flutter 앱/Flutter Basic 2021. 12. 23. 23:56

728x90

Flutter에서 screen 과 page 는 route 로 불린다.
Route는 Android의 Activity, iOS의 ViewController와 동일하다.
Flutter에서는 Route 역시 위젯이다.

새로운 route로 이동은 Navigator를 사용한다.
Navigator.push()를 사용하여 두 번째 route로 전환한다.
Navigator.pop()을 사용하여 첫 번째 route로 되돌아 온다.

import 'package:link2me/route.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstRoute(),
    );
  }
}

import 'package:flutter/material.dart';
 
class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            // 눌렀을 때 두 번째 route로 이동
            // push() 메서드는 Route를 Navigator에 의해 관리되는 route 스택에 추가
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}
 
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // pop() 메서드는 route 스택에서 현재 Route를 제거
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}
 

자료 출처 : https://docs.flutter.dev/cookbook/navigation/navigation-basics

Navigator.pushNamed()를 통한 화면전환

출처 : https://docs.flutter.dev/cookbook/navigation/named-routes

Route 정의하기
다음으로, MaterialApp 생성자에 initialRoute와 routes 이름의 추가 프로퍼티를 제공하여 route를 정의한다.
initialRoute 프로퍼티는 앱의 시작점을 나타내는 route를 정의하고,
routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다.

 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        // "/" Route로 이동하면, FirstRoute 위젯을 생성한다.
        '/': (context) => FirstRoute(),
        // "/second" route로 이동하면, SecondRoute 위젯을 생성한다.
        '/second': (context) => SecondRoute(),
      },
      //home: FirstRoute(),
    );
  }

import 'package:flutter/material.dart';
 
class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            // 눌렀을 때 두 번째 route로 이동
            // push() 메서드는 Route를 Navigator에 의해 관리되는 route 스택에 추가
            // Navigator.push(
            //   context,
            //   MaterialPageRoute(builder: (context) => SecondRoute()),
            // );
 
            // Named route를 사용하여 두 번째 화면으로 전환
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}
 
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // pop() 메서드는 route 스택에서 현재 Route를 제거
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

화면 전환 코드가 포함된 예제이다.

import 'package:flutter/material.dart';
import 'package:myapp/listview_demo1.dart';
 
class CallsfloatBtn extends StatefulWidget {
  const CallsfloatBtn({Key? key}) : super(key: key);
 
  @override
  _CallsfloatBtnState createState() => _CallsfloatBtnState();
}
 
class _CallsfloatBtnState extends State<CallsfloatBtn> {
  int _counter = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
          children: <Widget>[
            Text(
              '당신은 버튼을 눌렀어요 :',
              softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_counter 번',
              style: TextStyle(fontSize: 25),
            ),
            ElevatedButton(
              child: Text('화면 이동'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ListView_Demo1())
                );
              },
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.teal),
                  padding: MaterialStateProperty.all(EdgeInsets.all(15)),
                  textStyle: MaterialStateProperty.all(TextStyle(fontSize: 14))),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}
 

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
// Android Studio 에서 stless 를 입력후 엔터키를 치면
// 자동완성 코드가 작성되고 클래스명을 지정하면 된다.
class ListView_Demo1 extends StatelessWidget {
  const ListView_Demo1({Key? key}) : super(key: key);
 
  // ListView 위젯 정적 데모
  static const List<String> _data = [
    'Mercury(수성)',
    'Venus(금성)',
    'Earth(지구)',
    'Mars(화성)',
    'Jupiter(목성)',
    'Saturn(토성)',
    'Uranus(천왕성)',
    'Neptune(해왕성)',
    'Pluto(명왕성)',
  ];
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: CupertinoNavigationBar(
          leading: CupertinoNavigationBarBackButton(
            onPressed: () => Navigator.of(context).pop(),
          ),
          middle: Text('쿠퍼티노 UI'),
          trailing: GestureDetector(
            child: Icon(CupertinoIcons.search),
            onTap: (){},
          ),
          backgroundColor: CupertinoColors.activeGreen,
          border: Border(
              bottom:BorderSide(
                  width: 1,
                  color: CupertinoColors.activeGreen,
                  style: BorderStyle.solid
              )
          ),
        ),
        //body: _buildStaticListView(),
        body: _buildStaticListViewSeperated(),
      ),
    );
  }
 
  Widget _buildStaticListView() {
    return ListView.builder(
      itemCount: _data.length,
      itemBuilder: (BuildContext _context, int i) {
        return ListTile(
          title: Text(_data[i],
              style: TextStyle(
                fontSize: 23,
              )),
          trailing: Icon(
            Icons.favorite_border,
          ),
        );
      },
    );
  }
 
  Widget _buildStaticListViewSeperated() {
    return ListView.separated(
      itemCount: _data.length,
      itemBuilder: (BuildContext _context, int i) {
        return ListTile(
          title: Text(_data[i],
              style: TextStyle(
                fontSize: 23,
              )),
          trailing: Icon(
            Icons.favorite_border,
          ),
        );
      },
      separatorBuilder: (BuildContext _context, int i) {
        return const Divider();
      },
    );
  }
}
 

저작자표시 비영리

'Flutter 앱 > Flutter Basic' 카테고리의 다른 글

Flutter Widget 개념(stateless, stateful) (0)	2022.06.18
Flutter input dialog (자식 → 부모) (0)	2022.06.15
Flutter showDialog and AlertDialog Widget (부모 → 자식) (0)	2022.06.14
Flutter ListView 예제1 (0)	2021.12.27
Flutter Toast 메시지 (0)	2021.12.24

Link2Me

,

Flutter BottomNavigationBar 예제

Flutter 앱/Layout 2021. 12. 22. 22:16

728x90

플러터 BottomNavigationBar 예제를 나중에 활용하는데 도움될 수 있게 작성해본 예제다.

BottomNavigationBar 검색하면 단순한 것이 대부분이라 향후 기능 구현시 활용 목적으로 약간 더 추가했다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: '플러터 데모 Main'),    );
  }
}
 
// Android Studio 에서 stful 엔터를 치면 자동으로 만들어진다.
// 여기에서 클래스 이름만 지정하면 자동으로 만들어진다.
class MyHomePage extends StatefulWidget {
  final String title; // 선언한 변수는 final을 붙여야 한다.
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
  // Stateless 위젯과 다른 점은 createState() 메소드를 통해
  // 상태를 담당하는 클래스를 지정할 수 있다.
}
 
// 클래스 이름 앞에 _가 붙어 있으면 private 클래스로 본다.
// 다트에서는 Java와 같이 public, protected, private 같은 접근 제어자 키워드 없음
class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0; // _를 붙이면 private
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
 
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    CallsfloatBtn(), // class 호출
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex, // 선택된 Index
        backgroundColor: Colors.grey[200], //Bar의 배경색
        selectedItemColor: Colors.amber[800],
        selectedFontSize: 15, //선택된 아이템의 폰트사이즈
        unselectedFontSize: 12, //선택 안된 아이템의 폰트사이즈
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
    );
  }
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}
 
class CallsfloatBtn extends StatefulWidget {
  const CallsfloatBtn({Key? key}) : super(key: key);
 
  @override
  _CallsfloatBtnState createState() => _CallsfloatBtnState();
}
 
class _CallsfloatBtnState extends State<CallsfloatBtn> {
  int _counter = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
          children: <Widget>[
            Text(
              '당신은 버튼을 눌렀어요 :',
              softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_counter 번',
              style: TextStyle(fontSize: 25),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}
 

참고자료

https://blog.logrocket.com/how-to-build-a-bottom-navigation-bar-in-flutter/

How to build a bottom navigation bar in Flutter - LogRocket Blog

This tutorial demonstrates how to build, integrate, and customize a bottom navigation bar in a Flutter app.

blog.logrocket.com

저작자표시 비영리 변경금지

'Flutter 앱 > Layout' 카테고리의 다른 글

Flutter CustomScrollView (0)	2022.06.21
Flutter Drawer Widget (0)	2022.06.16
Flutter Layout (0)	2021.12.26
Flutter Theme(테마) 변경 (0)	2021.12.24
Flutter TabBar (0)	2021.12.22

Link2Me

,

Flutter TabBar

Flutter 앱/Layout 2021. 12. 22. 11:04

728x90

Flutter 설치하면 기본 설치되는 소스코드를 수정하여 탭으로 화면 구성하는 방법 연습하고 적어둔다.

TabController 생성 → TabBar 에 Tab 추가 → TabBarView에 각 Tab에 해당하는 콘텐츠 구성

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        primaryColor: const Color(0xfff0c0f1),
        accentColor: const Color(0xfff0c0f1),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: const MyHomePage(title: '플러터 데모 Main'),
    );
  }
}
 
// Android Studio 에서 stful 엔터를 치면 자동으로 만들어진다.
// 여기에서 클래스 이름만 지정하면 자동으로 만들어진다.
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title; // 선언한 변수는 final을 붙여야 한다.
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
// Stateless 위젯과 다른 점은 createState() 메소드를 통해
// 상태를 담당하는 클래스를 지정할 수 있다.
}
 
// 클래스 이름 앞에 _가 붙어 있으면 private 클래스로 본다.
// 다트에서는 Java와 같이 public, protected, private 같은 접근 제어자 키워드 없음
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // _를 붙이면 private
 
  @override
  Widget build(BuildContext context) {
    // TabController 위젯으로 감싼다.
    return DefaultTabController(
        initialIndex: 1,
        length: 3, // 탭의 수 설정
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            // TabBar 구현, 각 content를 호출할 탭들을 등록
            bottom: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.directions_car), text: '첫번째'),
                Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
                Tab(
                  icon: Icon(Icons.directions_bike),
                  text: "Bike",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
                  children: <Widget>[
                    Text(
                      '당신은 버튼을 눌렀어요 :',
                      softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
                      style: Theme.of(context).textTheme.headline5,
                    ),
                    Text(
                      '$_counter 번',
                      style: TextStyle(fontSize: 25),
                    ),
                  ],
                ),
              ),
              Center(
                child: Text("It's rainy here"),
              ),
              Icon(Icons.directions_bike),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter, // 정의하고 alt + Enter 를 눌러서 메소드 생성
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ));
  }
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}
 

참고하면 도움될 자료

https://www.woolha.com/tutorials/flutter-using-tabbar-tabbarview-examples

Flutter - Using TabBar & TabBarView Examples

A tutorial of how to create tab layout in Flutter using TabBar and TabBarView

www.woolha.com

https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/#customizethetabindicatorintabbar

Flutter TabBar: A complete tutorial with examples - LogRocket Blog

TabBar enables you to improve the UX of your Flutter app by organizing content with tabs for users to tap and scroll through.

blog.logrocket.com

저작자표시 비영리 변경금지

'Flutter 앱 > Layout' 카테고리의 다른 글

Flutter CustomScrollView (0)	2022.06.21
Flutter Drawer Widget (0)	2022.06.16
Flutter Layout (0)	2021.12.26
Flutter Theme(테마) 변경 (0)	2021.12.24
Flutter BottomNavigationBar 예제 (0)	2021.12.22

Link2Me

,

Flutter 시운전

Flutter 앱/환경설정 2021. 12. 22. 00:05

728x90

플러터를 처음 실행하는 과정을 적어둔다.

7번은 반드시 소문자로 적어야 한다.

앱의 이름은 대소문자를 구분하지 않으니 전부 소문자로 적어야 한다.

소문자 사이에 _를 넣는 스네이크 케이스를 추천한다.

test라는 건 인식을 못하더라. 그래서 myapp 으로 입력했다.

Android 폰을 연결하고 컴파일을 했더니 데모 앱이 화면에 나온다.

폴더 구조를 보면....

android 와 ios : 각 플랫폼 전용 폴더로 대개 손댈 필요가 없다.

lib : 플러터 소스코드(.dart 파일) 위치

test : 유닛 테스트가 있으면 여기에 넣는다.

pubspec.yaml : 프로젝트 파일로 프로젝트 이름, 설명, 의존성 등을 설정한다.

.metadata 와 .package : 중요한 설정파일로 개발자가 열어볼 필요는 없다.

앱을 웹 앱으로 실행하면 플러터는 브라우저를 기기로 간주한다.

앱을 에뮬레이터로 실행하는 경우이며, 기기를 종료하고자 하면 빨간색 메모 버튼을 누르면 된다.

코드를 추가하거나 수정하고 저장 버튼을 누르면 에뮬레이터(또는 폰)에서 즉시 변경되어 로드된다. 이 기능을 핫 리로드라고 한다.

플러터 세계에서는 컴포넌트를 위젯이라고 한다. 위젯을 합쳐서 커스텀 위젯을 만들고, 커스텀 위젯을 합쳐서 더 복잡한 커스텀 위젯을 만든다. 완전한 앱이 만들어질 때까지 이 과정을 계속해야 한다.

값 위젯(Text 위젯, Image 위젯), Layout 위젯, Navigation 위젯, 기타 위젯 등은 앱의 구성요소다.

모든 위젯은 속성과 메소드를 가질 수 있는 클래스이다.

모든 위젯은 생성자를 가지며, 생성자의 매개변수는 있을 수도 있고 없을 수도 있다.

모든 위젯은 BuildContext 를 인수로 받는 build 메소드가 있다는 점이 중요하다.

이것으로 Flutter 기본적인 시작 준비가 된 것 같다.

플러터 앱은 main()함수에서 시작한다.

main 함수는 runApp()이라는 함수를 호출한다. runApp()은 위젯 하나를 인수로 받는다. 이 위젯은 루트 위젯으로 어떤 이름을 붙여도 상관없지만 플러터의 StatelessWidget을 상속한 클래스여야 한다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '플러터 데모 Main'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
 

Widget build 부분을 변경해가면서 코딩 연습을 해본다.

 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '당신은 버튼을 눌렀어요 :',
              softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_counter 번',
              style: Theme.of(context).textTheme.headline5,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

화면 구성하는 것을 이해하기 위해 다시 수정해 본다.

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: const MyHomePage(title: 'Flutter Demo Home Page'),
      home: HelloPage(title: 'Hello Flutter',));
  }
}
 
// Android Studio 에서 stful 엔터를 치면
// 자동으로 만들어진다. 여기에 클래스 이름만 지정한다.
class HelloPage extends StatefulWidget {
  const HelloPage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  _HelloPageState createState() => _HelloPageState();
  // Stateless 위젯과 다른 점은 createState() 메소드를 통해
  // 상태를 담당하는 클래스를 지정할 수 있다.
}
 
// 클래스 이름 앞에 _가 붙어 있으면 private 클래스로 본다.
// 다트에서는 Java와 같이 public, protected, private 같은 접근 제어자 키워드 없음.
class _HelloPageState extends State<HelloPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(
        'Hello, World',
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}
 

저작자표시 비영리 변경금지

'Flutter 앱 > 환경설정' 카테고리의 다른 글

Flutter Upgrade (0)	2022.06.17
dart-sdk 설치 (0)	2022.01.11
Target of URI doesn't exist 'package:flutter/material.dart' (0)	2022.01.11
Firebase 프로젝트 등록 방법 (0)	2021.12.29
Flutter 설치 (0)	2021.12.20

Link2Me

,

Flutter 설치

Flutter 앱/환경설정 2021. 12. 20. 23:09

728x90

https://flutter.dev/docs/get-started/install/windows 에서 파일을 받아서 압축을 푼다.

그런다음 C 드라이브로 옮겼다. (용량이 충분한 곳에 설치하면 된다)

위 그림과 같이 환경변수에 Flutter 를 등록해준다.

CMD 창을 열고 flutter doctor 를 실행하니까 아래와 같이 나온다.

Flutter Project 를 생성할 수 있는 버튼이 생겼다. Open 버튼 우측을 눌러 SDK Manager 를 선택한다.

아래 그림과 같이 이슈가 없다면 Flutter 설치는 준비된 것이다.

저작자표시 비영리

'Flutter 앱 > 환경설정' 카테고리의 다른 글

Flutter Upgrade (0)	2022.06.17
dart-sdk 설치 (0)	2022.01.11
Target of URI doesn't exist 'package:flutter/material.dart' (0)	2022.01.11
Firebase 프로젝트 등록 방법 (0)	2021.12.29
Flutter 시운전 (0)	2021.12.22

Link2Me

,

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

'Flutter 앱'에 해당되는 글 90건

구글 인증 사용 방법

'Flutter 앱 > 환경설정' 카테고리의 다른 글

http 통신을 위한 설정

'Flutter 앱 > Flutter Basic' 카테고리의 다른 글

예제 소스코드

Expanded 위젯

Stack 위젯

SizedBox 위젯

'Flutter 앱 > Layout' 카테고리의 다른 글

'Flutter 앱 > Flutter Basic' 카테고리의 다른 글

테마 지정 안된 코드

테마 지정한 코드

'Flutter 앱 > Layout' 카테고리의 다른 글

Navigator.pushNamed()를 통한 화면전환

'Flutter 앱 > Flutter Basic' 카테고리의 다른 글

'Flutter 앱 > Layout' 카테고리의 다른 글

'Flutter 앱 > Layout' 카테고리의 다른 글

'Flutter 앱 > 환경설정' 카테고리의 다른 글

'Flutter 앱 > 환경설정' 카테고리의 다른 글

카테고리

태그목록

글 보관함

달력

공지사항

링크

Link2Me

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바